Creé este código de prueba para probar el problema al que me enfrento, aquí cuando hacemos clic en cualquiera de los botones, abre un cajón de prueba, y dentro del cajón de prueba cuando hacemos clic en el texto, la consola registra el texto, pero después de eso cuando cerramos el cajón con el botón de cerrar dentro del cajón y abre un nuevo cajón, el registro de la consola se dispara 2 veces y el número sigue aumentando las veces que abrimos y volvemos a abrir el cajón, ¿por qué sucede esto? ¿Cómo resolverlo?
const test_modal = document.querySelector('.test-modal'); document.addEventListener('click', (e) => { if(e.target.classList.contains('btn')) { e.preventDefault(); const value = e.target.closest('.btn').getAttribute("data-name"); showmodal(value); } }) function showmodal(value) { test_modal.innerHTML = ` <div class="inner-test"><h3 class="heading-test">${value}</h3><button class="closeme">Close</button></div> `; document.addEventListener('click', (e) => { if(e.target.classList.contains('heading-test')) { console.log(e.target); } }) } document.addEventListener('click', (e) => { if(e.target.classList.contains('closeme')) { test_modal.innerHTML = ``; } }) .inner-test { background: tomato; width: 80px; height: 80px; } <button data-name="first" class="btn"> I am First </button> <button data-name="second" class="btn"> I am Second </button> <button data-name="third" class="btn"> I am Third </button> <div class="test-modal"> </div>Debe eliminar el detector de eventos de clic cuando cierre el modal.
const test_modal = document.querySelector('.test-modal'); document.addEventListener('click', (e) => { if(e.target.classList.contains('btn')) { e.preventDefault(); const value = e.target.closest('.btn').getAttribute("data-name"); showmodal(value); } }) let clickHandler; function showmodal(value) { test_modal.innerHTML = ` <div class="inner-test"><h3 class="heading-test">${value}</h3><button class="closeme">Close</button></div> `; clickHandler = (e) => { if(e.target.classList.contains('heading-test')) { console.log(e.target); } } document.addEventListener('click', clickHandler ) } document.addEventListener('click', (e) => { if(e.target.classList.contains('closeme')) { document.removeEventListener('click', clickHandler) test_modal.innerHTML = ``; } }) .inner-test { background: tomato; width: 80px; height: 80px; } <button data-name="first" class="btn"> I am First </button> <button data-name="second" class="btn"> I am Second </button> <button data-name="third" class="btn"> I am Third </button> <div class="test-modal"> </div>