为什么我只能删除项目的最后一个元素

Question

我正在尝试使用以下代码删除 HTML 中的数组元素：

function displayBasket() {
    let basketItems = getBasket();
    const basket = document.getElementById("panier");
    let totalPrice = document.getElementById('totalPrice');
    totalPrice.innerHTML = ``
    if (basketItems.length === 0) {
        basket.innerHTML = `<p>Votre panier est vide</p>`;
    } else {
        const basketTable = document.getElementById("basketTable");
        let total = 0;
        basketItems.forEach((item, index) => {
            const cameraId = item.id;
            const quantity = item.quantity;
            ajax({ url: `/${cameraId}`, method: 'GET', status: 200, data: null })
                .then((result) => {
                    const cameraDetails = JSON.parse(result);
                    basketTable.innerHTML += `
                <tr>
                    <td><img id="imageProduct" src="${cameraDetails.imageUrl}"></td>
                    <td id="descriptionProduct">${cameraDetails.name}</td>
                    <td id="priceProduct">${(cameraDetails.price / 100).toFixed(2)}</td>
                    <td id="quantity">${quantity}</td>
                    <td><button id="deleteButton-${index}">Supprimer</button></td>
                </td>
                </tr>`
                    buttonProduct = document.getElementById(`deleteButton-${index}`);
                    buttonProduct.addEventListener('click', () => {
                        deleteProduct(cameraId);
                        basketTable.innerHTML = ``;
                        displayBasket();
                    })
                    total += cameraDetails.price * quantity
                    let totalPrice = document.getElementById('totalPrice');
                    totalPrice.innerHTML = `<p>Prix total : ${(total / 100).toFixed(2)}</p>`;
                });
        })

但问题是我只能删除最后一项。?

因此，如果我的数组中有 1 个项目，没关系，但我有更多项目，我需要先删除最后一个项目，然后再删除另一个项目等....

请帮助我 :)

Answer 1

您在模板字符串中定义了一个事件侦听器。那永远不会被执行

您还需要唯一 ID，但如果您委托，实际上不需要它

document.getElementById("basketTable").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("deleteButton")) {
    tgt.closest("tr").remove();
  }
})

使用

<td><button class="deleteButton">Supprimer</button></td>

如果需要在某处传递ID，改为

<td><button data-id="${cameraId}" class="deleteButton">Supprimer</button></td>

并且有

document.getElementById("basketTable")
  .addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("deleteButton")) {
    tgt.closest("tr").remove();
    deleteProduct(tgt.dataset.id)
  }
})

看起来您每次删除内容时都从服务器读取购物篮...- 听起来效果不佳

为什么我只能删除项目的最后一个元素

Why i can only delete last Element of my items

javascript

innerhtml