为什么我只能使用 .FILTER 删除本地存储的最后一项

Question

我不明白为什么我只能删除相机列表的最后一个 ELEMENT

我可以删除最后一个，即使它有效，我也会收到错误消息：

Uncaught (in promise) TypeError: Cannot read property 'innerHTML' of null
    at panier.js:43
    at Array.forEach (<anonymous>)
    at displayBasket (panier.js:42)

因此，如果删除最后一个并刷新我的 2 个相机（错误无法读取）。如果我再次删除最后一个并刷新并获得最后一个相机（仍然出现错误无法读取）

但是如果我在 table 中只有 1 个项目单击 SUPPRIMER（英文删除），它可以正常工作。

我试图理解，但我不明白。

请帮助我:p

async function displayBasket() {
    const cameraIds = getCameraIds();

    const basket = document.getElementById("panier");

    if (cameraIds.length === 0) {
        basket.innerHTML = `<p>Votre panier est vide</p>`
    } else {
        const promises = [];

        cameraIds.forEach(cameraId => {
            promises.push(getCameraDetails(cameraId))
        })

        const allCameraDetails = await Promise.all(promises);
        const basketTable = document.getElementById("basketTable");
        console.log('allCameraDetails', allCameraDetails)
        allCameraDetails.forEach((cameraDetails, index) => {
            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><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })

        });
    }
}

（观看屏幕截图）

Answer 1

尝试在 html 修改后更新事件侦听器。

        allCameraDetails.forEach((cameraDetails, index) => {
            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><button id="button-${index}">Supprimer</button></td>
            </td>
            </tr>
            `})
            allCameraDetails.forEach((_, index) => {
            buttonProduct = document.getElementById(`button-${index}`);
            buttonProduct.addEventListener('click', () => {
                const storageCameras = JSON.parse(localStorage.getItem('basketCameras'));
                const newStorageCameras = storageCameras.filter(currentCameraId => { return                           currentCameraId !== cameraDetails._id })
                localStorage.setItem('basketCameras', JSON.stringify(newStorageCameras));

                basket.innerHTML = ``;
                displayBasket();
            })
            })

Answer 2

如果您从存储中删除了一个特定的项目并且只有最后一个消失了，那是因为您的代码没有找到那个特定的元素，所以它删除了最后一个。

尝试：

当你点击删除按钮时检查数据，这样你就知道你的代码得到了什么数据。
如果数据应该是正确的，那么请检查您的过滤器函数的值。可能与任何存储的数据都不匹配。
由于您正在修改 HTML 请同时考虑 ptothep 的回答。
我还建议使用 createElement 和 appendChild 而不是描述 innerHTML，因为它编写起来不太方便，但从长远来看更灵活。只是以另一种方式讲述...

为什么我只能使用 .FILTER 删除本地存储的最后一项

Why can i only remove the last item of my LOCAL STORAGE with .FILTER

javascript

innerhtml

local-storage