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

我试图用以下代码删除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>`;
                });
        })

函数displaybarket（）{
让basketItems=getBasket（）；
const basket=document.getElementById（“panier”）；
让totalPrice=document.getElementById（'totalPrice'）；
totalPrice.innerHTML=``
if（basketItems.length==0）{
basket.innerHTML=`Votre panier est vide
`；
}否则{
const basketTable=document.getElementById（“basketTable”）；
设total=0；
basketItems.forEach（（项目，索引）=>{
const cameraId=item.id；
常量数量=项目数量；
ajax（{url:`/${cameraId}`，方法：'GET'，状态：200，数据：null}）
。然后（（结果）=>{
const cameraDetails=JSON.parse（结果）；
basketTable.innerHTML+=`
${cameraDetails.name}
${（cameraDetails.price/100）.toFixed（2）}
${quantity}
供给者
`
buttonProduct=document.getElementById（`deleteButton-${index}`）；
buttonProduct.addEventListener（'单击'，（）=>{
删除产品（cameraId）；
basketTable.innerHTML=`；
显示篮（）；
})
总计+=cameraDetails.price*数量
让totalPrice=document.getElementById（'totalPrice'）；
totalPrice.innerHTML=`Prix total:${（total/100）.toFixed（2）}
`；
});
})

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

因此，如果我的数组中有1个项目，这是可以的，但我有更多的项目，我需要删除最后一个首先删除另一个等

---

请帮助我：）

您在模板字符串中定义了一个eventlistener。这将永远不会执行

您还需要唯一的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>

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