Actualmente estoy luchando con un problema, que es bastante difícil de describir para mí, pero hago lo mejor que puedo.
Construí un bucle que se parece a esto:
for (var j = 0; j < button_remove_ingredient.length; j++) { button_remove_ingredient[j].addEventListener("click", () => { button_remove_ingredient = document.querySelectorAll(".remove_ingredient"); document.querySelectorAll(".ingredient_list")[j].remove(); }) } El problema es que el ciclo se carga después del momento en que se crea el DOM y en este momento button_remove_ingredient tiene la longitud de 1 porque solo hay un botón en el HTML.
Hay otra función, que crea clones de ese botón después de presionar otro botón.
Entonces, en este caso, es posible tener varios button_remove_ingredient pero solo si el usuario realmente interactúa con la interfaz.
Ahora, solo el primer botón dispara el eventListener , los otros no y cuando console.log(j) dentro del eventlistener , siempre me mostrará 1 .
Quería probar eso con un bucle foreach pero tampoco funcionó.
Me alegraría mucho si alguien entendiera mi problema y tuviera una buena solución para eso.
Usé un eventListener comprobando la lista de classList del objetivo del evento para eliminarlo.
Por favor revise el fragmento a continuación:
document.body.addEventListener('click', () => { if(this.event.target.classList.contains("remove_ingredient")){ this.event.target.remove() } }, true); function addButton(){ document.getElementById("container").innerHTML += '<button class="remove_ingredient">New Button</button>'; } <div id="container"> <button class="remove_ingredient">Button 1</button> <button class="remove_ingredient">Button 2</button> <button class="remove_ingredient">Button 3</button> </div> <button onclick="addButton()">Add new button</button>