CODEWITHSUNDEEP
javascripthtml
James Reich
James Reich

Reputation: 19

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

I'm building this Notification tray:
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:
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?

Upvotes: 0

Views: 65

Answers (3)

Hazrat Gafulov
Hazrat Gafulov

Reputation: 348

   

 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>

Upvotes: 1

dippas
dippas

Reputation: 60563

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>

Upvotes: 1

sashok1337
sashok1337

Reputation: 1019

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>

Upvotes: 1

Related Questions