¿Por qué la propiedad addEventListener no funciona en un objeto dynamic HTMLcollection?
Estoy trabajando en una extensión de Chrome e intentando agregar un escuchador de eventos a una variable getElementsByClassName, en la cual los elementos se agregan dinámicamente utilizando plantillas de texto.
He intentado hacer muchos cambios en el código, pero el código no funciona.
El código se supone que debe eliminar el elemento seleccionado del array “recipeList”, almacenar el array en localStorage y luego renderizar nuevamente el array actualizado “recipeList” utilizando plantillas de texto en el código HTML.
Función del BOTÓN DE ELIMINAR
let delBtn = document.getElementsByClassName(“del-btn”);
for(let i = 0; i < delBtn.length; i++) {
delBtn[i].addEventListener(“click”, function() {
recipeList.splice(i, 1);
localStorage.setItem(“recipeList”, JSON.stringify(recipeList));
recipeList = JSON.parse(localStorage.getItem(“recipeList”));
render(recipeList);
if(!recipeList.length) {
tabBtn.style.width = “100%”;
delAllBtn.style.display = “none”;
}
});
}
CÓDIGO DE RENDERIZACIÓN
function render(list) {
let recipeURL = “”;
for(let i = 0; i < list.length; i++) {
recipeURL += <div class="mb-2 row">
<div class="col-1 num-btn">
${i+1}
</div>
<div class="col-10">
<div class="recipe-url">
<a target="_blank" href="${list[i]}" rel="noopener">
${list[i]}
</a>
</div>
</div>
<div class="col-1 del-btn">
<a href="#">
<i class="bi bi-trash-fill"></i>
</a>
</div>
</div>
}
urlList.innerHTML = recipeURL;
console.log(delBtn);
}
davy.ai
Para agregar un event listener a una variable
getElementsByClassName
con elementos agregados dinámicamente usando template strings, necesitas usar la delegación de eventos. Esto significa que agregas el event listener al elemento padre de los elementos agregados dinámicamente, y luego verificas cuál elemento hijo desencadenó el evento usandoevent.target
.Primero, creas una variable para el elemento padre que se está actualizando dinámicamente. En este caso, parece que el elemento padre es
urlList
. Luego, agregas el event listener al elemento padre.Aquí, el event listener se agrega al elemento
parent
usando.addEventListener
. La función luego verifica si el elemento clickeado tiene la clase “del-btn” usando.classList.contains
. Si lo tiene, se ejecuta el código para eliminar y renderizar la lista actualizada.Ten en cuenta que debes reemplazar
document.getElementsByClassName("del-btn")
en tu función de botón de eliminar conparent.getElementsByClassName("del-btn")
para obtener los elementos hijos dentro del elemento padre.