0
422
Vistas¿Cómo comprobar si todos mis elementos se han ocultado?
Estoy construyendo esta bandeja de notificaciones:
y estoy tratando de verificar y ver si se eliminan todas las notificaciones y, de ser así, ocultar la bandeja también. Se queda en la pantalla en este momento:
.
Aquí hay una función bastante simple para eliminar las notificaciones individuales:
function removeNoti(btn) { btn.style.display = "none"; }y aquí está mi 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>Entonces, ¿cómo puedo saber que se ha eliminado todo el "btn"? Entonces, ¿de esa manera puedo hacer algunas condiciones para configurar básicamente el noti-tray-wrapper para mostrar = "ninguno" también?
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Aquí tienes:
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>
·
Juan Pablo Isaza
Denunciar
0
Puede usar remove , luego verificar children.length y cuando es igual a cero, lo oculta.
También evite los controladores de eventos en línea onclick ya que están desactualizados
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>
·
Juan Pablo Isaza
Denunciar
0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta