为每个产品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");