Tengo un cuadro de alerta que tiene su propio botón de cierre. No sabía que los usuarios colocarían varias instancias de él en una página web.
Actualmente, cuando se hace clic en el botón de cerrar de un elemento, solo se oculta la primera instancia. No puedo cerrar el otro después de eso. Cuando hago clic en su botón de cerrar, no pasa nada.
Quiero poder hacer clic en el botón de cierre de cada elemento para ocultar ese elemento y poder ocultar los elementos de uno en uno. Siento que tiene algo que ver con la palabra clave ESTA, pero no estoy seguro.
Aquí está el HTML.
<div class="dcom-c__alert"> <div class="dcom-c-alert__icon"> <svg class="dcom-c-alert__icon--alert" aria-hidden="true" focusable="false"> <use xlink:href="/public/icons/cbds-icons-ui.svg#error-circle"> </use> </svg> </div> <div class="dcom-c-alert__message"> <div role="alert" class="dcom-c-alert-copy">Alert: Due to the weather in NC, our branches are closed Tuesday 2/27/21. <a href="#" class="dcom-c-alert__icon--message" aria-label="Learn more about this alert.">Learn more <svg role="presentation" class="dcom-c-alert__icon--chevron" focusable="false" width="20" height="20"> <use href="/public/icons/cbds-icons-ui.svg#chevron-right" xlink:href="/public/icons/cbds-icons-ui.svg#chevron-right"> </use> </svg> </a> </div> </div> <button class="dcom-c-close-alert-wrapper" aria-label="Close"> <svg class="cbds-c-icon cbds-c-iconButton__icon alert-close" focusable="true"> <use href="../../../public/icons/cbds-icons-ui.svg#close" xlink:href="../../../public/icons/cbds-icons-ui.svg#close"></use> </svg> </button>Aquí está mi código JavaScript. Alguien puede ayudarme porfavor? Gracias.
const alert = document.querySelector('#dcom-c-alert'); const hideAlert = document.querySelector('.dcom-c-close-alert-wrapper'); function closeAlert() { alert.classList.add('hide'); } hideAlert.addEventListener('click', function () { closeAlert(); }); hideAlert.addEventListener("keydown", e => { // ADA: Next button activates with spacebar or enter key if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") { closeAlert(); } });Después de leer esta publicación, obtuve algo de claridad y resolví mi propio problema. La clave fue crear una variable temporal ( alerta , en mi caso) para contener el índice de la alerta actual.
Aquí está mi JavaScript:
alerts.forEach(alert => { let alert = alerts[i]; closeButtons[i].addEventListener('click', function () { alert.remove(); }); });