为每个产品创建事件监听器JS

Question

我必须构建一个事件侦听器，用于侦听单击以删除链接到的产品；为此，我被要求使用element.closest()。

以下是为每个产品生成的HTML：

<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>

正如您所看到的，产品的标识在文章标签中。

我用事件监听器延迟启动我的函数，以确保HTML已经创建，这样我就可以收集按钮了。

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

有了这个代码，每个按钮都会响应功能，但它们只会删除第一个产品。

以下是删除功能的样子：

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();
}

我所理解的是：element.closest()只与querySelector()一起工作(我无法使它与getElements等一起工作…(，但querySelector()只返回它找到的第一个元素。

我怎样才能做到这一点？

Answer 1

function deleteProduct() {
const itemToDelete = event.target.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();
}

您可以使用单击事件的目标元素，而不是使用document.querySelector。

或者你可以直接使用

const idProductToDelete = event.target.closest("article").getAttribute("data-id");