Tengo que crear un detector de eventos que escuche un clic para eliminar el producto al que está vinculado; para esto me pidieron que usara element.closest() .

Aquí está el HTML que se está generando para cada producto:

 <article class="cart__item" data-id="${product._id}" data-color="${chosenProduct.color}"> <div class="cart__item__img"> <img src="${product.imageUrl}" alt="${product.altTxt}"> </div> <div class="cart__item__content"> <div class="cart__item__content__description"> <h2>${product.name}</h2> <p>${chosenProduct.color}</p> <p>${product.price}€</p> </div> <div class="cart__item__content__settings"> <div class="cart__item__content__settings__quantity"> <p>Qté : ${quantity}</p> <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="${quantity}"> </div> <div class="cart__item__content__settings__delete"> <p class="deleteItem">Supprimer</p> </div> </div> </div> </article>

Como puede ver, la identidad del producto está dentro de la etiqueta del artículo.

Lanzo mi función con el detector de eventos con un retraso, para asegurarme de que se crea el HTML, de modo que pueda recopilar los botones.

 window.setTimeout(function deleteButton() { const buttons = document.querySelectorAll(".deleteItem"); buttons.forEach((button) => { button.addEventListener("click", deleteProduct); }); }, 800);

Con este código, cada botón responde a la función, pero solo eliminan el primer producto.

Así es como se ve la función de eliminación:

 function deleteProduct() { const itemToDelete = document.querySelector(".cart__item__content"); const idProductToDelete = itemToDelete.closest("article").getAttribute("data-id"); const colorProductToDelete = itemToDelete.closest("article").getAttribute("data-color"); const productToDelete = "product-" + idProductToDelete + "-" + colorProductToDelete; //remove the item from local storage localStorage.removeItem(productToDelete); //remove from the html instantly deleteHtml(); }

Lo que entiendo es que: element.closest() solo funciona con querySelector() (no puedo hacer que funcione con getElements , etc.), pero querySelector() devuelve solo el primer elemento que encuentra.

¿Cómo puedo hacer que esto funcione?