Cuando quiero escuchar eventos en elementos creados dinámicamente a través de JS, necesito recurrir a escuchar los eventos en el cuerpo para actualizar la lista de elementos que JS está escuchando. ¿No hay una manera simple y elegante de actualizar la base de datos de elementos para que JS escuche cuando quiera?
document.querySelector('body').addEventListener('click', function (event) { if (event.target.className.toLowerCase() === 'demo-classes') { let closeBtns = document.getElementsByClassName("demo-classes"); Array.from(demoClasses).forEach(function (demoClass) { demoClass.addEventListener("click", function () { myArray.splice(demoClass.id.substring(2), 1); render(myArray); }); }); } }); Conduce a hacer clic dos veces, una vez en el cuerpo y otra vez en el elemento con la clase demo-classes antes de que la función de splice elimine el elemento específico de las matrices, luego la función de render representa el html. Todas demo-classes se generan usando createElement y las clases se configuran usando setAttribute en la función de render .
Use location.reload() para actualizar su página cuando desee actualizar la base de datos de elementos en la función getElementsByClassName . Almacene las variables y los elementos dinámicamente en Almacenamiento de sesión/Almacenamiento local para que sobreviva a las actualizaciones del navegador.