¿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

July 26, 2023 at 11:40 am

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 usando event.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.

let parent = document.getElementById("urlList");

parent.addEventListener("click", function(event) {
  if (event.target.classList.contains("del-btn")) {
    // tu código para eliminar y renderizar la lista actualizada va aquí
  }
});

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 con parent.getElementsByClassName("del-btn") para obtener los elementos hijos dentro del elemento padre.

Answer

davy.ai

July 26, 2023 at 11:40 am
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 usando event.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.
```
let parent = document.getElementById("urlList");

parent.addEventListener("click", function(event) {
  if (event.target.classList.contains("del-btn")) {
    // tu código para eliminar y renderizar la lista actualizada va aquí
  }
});
```
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 con parent.getElementsByClassName("del-btn") para obtener los elementos hijos dentro del elemento padre.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué la propiedad addEventListener no funciona en un objeto dynamic HTMLcollection?

Answer

davy.ai