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

浸礼会

我正在尝试使用以下代码删除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个项目就可以了，但是我有更多项目我需要先删除最后一个以删除其他项目等。

帮我吧:)

mplungjan

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

另外，您需要唯一的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)
  }
})

看起来您每次删除某些内容时都会从服务器中读取篮子...-听起来不太有效

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。