Tengo un botón dinámico que se supone que debe eliminar su elemento principal del DOM. Debido a que es dinámico, lo distorsioné con DOMContentLoaded y agregué para cada botón el EventListener con 'clic'. De alguna manera, no entro en la función de devolución de llamada (deleteTodo) cuando hago clic. Me alegrará saber qué estoy haciendo mal. Gracias :)
document.addEventListener('DOMContentLoaded', (event) => { let deleteBtn = document.getElementsByClassName('delete-btn'); for( let btn of deleteBtn) btn.addEventListener('click', deleteTodo); }); // Delete element const deleteTodo = () => { console.log("inside function"); // I DONT GET INTO THIS LINE WHEN CLICK }No puede llamar a una función asignada a una variable que no se ha inicializado . Use una declaración de función (se elevan automáticamente) en lugar de una expresión de función para asegurarse de que cuando su código intente agregar la función al oyente, esté realmente disponible. Y, como puede ver en el ejemplo, no importa dónde agregue la declaración.
function addThings() { const html = []; for (let i = 0; i < 5; i++) { html.push(`<div>${i} <button class="delete-btn">Delete</button></div>`) } return html.join(''); } document.body.innerHTML = addThings(); const buttons = document.querySelectorAll('.delete-btn'); buttons.forEach(button => { button.addEventListener('click', deleteTodo, false); }); function deleteTodo() { this.parentNode.remove(); }