How to check if all of my elements have been hidden?-CodePudding

I'm building this Notification tray and I'm trying to check and see if all the notifications are removed, and if so, hide the tray as well. It stays on the screen right now.

Here's a simple enough function to remove the individual notifcations:

function removeNoti(btn) {

btn.style.display = "none";

}

and here's my html:

                <div  onclick="removeNoti(this)">
                    <div >You have unread messages </div>
                    <div  id="n1">x</div>
                </div>
                <div  onclick="removeNoti(this)">
                    <div >You have unread messages </div>
                    <div  id="n2">x</div>
                </div>
                <div  onclick="removeNoti(this)">
                    <div >You have unread messages </div>
                    <div  id="n3">x</div>
                </div>
                <div  onclick="removeNoti(this)">
                    <div >You have unread messages </div>
                    <div  id="n4">x</div>
                </div>
            </div>

So how can I tell that all of the "btn" has been removed? So that way I can do some conditions to basically set the noti-tray-wrapper to display = "none" as well?

CodePudding user response：

Here you go:

function removeNoti(btn) {
  btn.classList.add('hidden');
  
  const visibleCount = document.querySelectorAll(".notification:not(.hidden)").length;

  if(!visibleCount){
    document.getElementById('wrapper').classList.add('hidden');
  }
}

#wrapper{
  background-color: #ff8888;
  border: 5px solid;
  padding: 10px;
}

.notification * {
  display: inline-block;
}

.hidden {
  display: none;
}

<div id="wrapper">
    <div  onclick="removeNoti(this)">
        <div >You have unread messages </div>
        <div  id="n1">x</div>
    </div>
    <div  onclick="removeNoti(this)">
        <div >You have unread messages </div>
        <div  id="n2">x</div>
    </div>
    <div  onclick="removeNoti(this)">
        <div >You have unread messages </div>
        <div  id="n3">x</div>
    </div>
    <div  onclick="removeNoti(this)">
        <div >You have unread messages </div>
        <div  id="n4">x</div>
    </div>
</div>

CodePudding user response：

You can use remove then check for children.length and when it equal to zero you hide it.

Also avoid the inline event handlers onclick as they are outdated

const notifications = document.querySelectorAll('.notification')
const tray = document.querySelector('.notification-tray')

notifications.forEach(el => el.addEventListener('click', e => {
  e.currentTarget.remove()
  if (tray.children.length === 0) console.log('zero')
}))

.notification-tray {
  background: lightgreen
}

<div >
  <div >
    <div >You have unread messages </div>
    <div  id="n1">x</div>
  </div>
  <div >
    <div >You have unread messages </div>
    <div  id="n2">x</div>
  </div>
  <div >
    <div >You have unread messages </div>
    <div  id="n3">x</div>
  </div>
  <div >
    <div >You have unread messages </div>
    <div  id="n4">x</div>
  </div>
</div>

CodePudding user response：

   

 function removeNoti(btn) {

btn.style.display = "none";

}
const n1 = document.getElementById("n1");
const n2 = document.getElementById("n2");
const n3 = document.getElementById("n3");
const n4 = document.getElementById("n4");
let remove =()=>{
  n1.style.display = "none"
  n2.style.display = "none"
  n3.style.display = "none"
  n4.style.display = "none"
  const container = document.getElementById("container")
if(n1.style.display == "none"){
 container.innerHTML = "<p>Notification  list is empty!</p>"
}
}

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
       <div  onclick="removeNoti(this)"  id="n1">
                    <div >You have unread messages </div>
                    <div >x</div>
                </div>
                <div  onclick="removeNoti(this)" id="n2">
                    <div  >You have unread messages </div>
                    <div >x</div>
                </div>
                <div  onclick="removeNoti(this)"  id="n3">
                    <div >You have unread messages </div>
                    <div >x</div>
                </div>
                <div  onclick="removeNoti(this)"  id="n4">
                    <div  >You have unread messages </div>
                  <div >x</div>
                </div>
            </div>
  </div>
  <button onclick="remove()">Remove all</button>
</body>
</html>