Question

0

420

Views

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

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 notifications:

function removeNoti(btn) {

btn.style.display = "none";

}

and here's my HTML:

<div id="noti-tray-wrapper">
                <div class="notification" onclick="removeNoti(this)">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn" id="n1">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn" id="n2">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn" id="n3">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn" 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?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-24T17:55:08.848Z

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 class="notification" onclick="removeNoti(this)">
        <div class="noti-tray">You have unread messages </div>
        <div class="noti-tray-btn" id="n1">x</div>
    </div>
    <div class="notification" onclick="removeNoti(this)">
        <div class="noti-tray">You have unread messages </div>
        <div class="noti-tray-btn" id="n2">x</div>
    </div>
    <div class="notification" onclick="removeNoti(this)">
        <div class="noti-tray">You have unread messages </div>
        <div class="noti-tray-btn" id="n3">x</div>
    </div>
    <div class="notification" onclick="removeNoti(this)">
        <div class="noti-tray">You have unread messages </div>
        <div class="noti-tray-btn" id="n4">x</div>
    </div>
</div>

Answer 2 · 2022-06-24T17:55:08.860Z

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 class="notification-tray">
  <div class="notification">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n1">x</div>
  </div>
  <div class="notification">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n2">x</div>
  </div>
  <div class="notification">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n3">x</div>
  </div>
  <div class="notification">
    <div class="noti-tray">You have unread messages </div>
    <div class="noti-tray-btn" id="n4">x</div>
  </div>
</div>

Answer 3 · 2022-06-24T17:55:08.870Z

   

 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 class="notification" onclick="removeNoti(this)"  id="n1">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)" id="n2">
                    <div class="noti-tray" >You have unread messages </div>
                    <div class="noti-tray-btn">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)"  id="n3">
                    <div class="noti-tray">You have unread messages </div>
                    <div class="noti-tray-btn">x</div>
                </div>
                <div class="notification" onclick="removeNoti(this)"  id="n4">
                    <div class="noti-tray" >You have unread messages </div>
                  <div class="noti-tray-btn">x</div>
                </div>
            </div>
  </div>
  <button onclick="remove()">Remove all</button>
</body>
</html>

0

420

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

3 answers

0

0

0

Find remote jobs

Andres GPT