Why i can only delete last Element of my items

Question

i am trying to delete element of my array in HTML with this code :

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

But the problem is that i only can remove the last item .?

So if i have 1 item in my array it's ok but i have more item i need the delete the last one first for delete the other one etc....

help me plz :)

Answer 1

You have an eventlistener defined in a template string. That would never get executed

Also you need unique IDs but you actually do not need it if you delegate

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

using

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

If you need to pass the ID somewhere, change to

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

and have

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

It also looks like you read the basket from server every time you delete something... - that does not sound effective