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

【问题标题】：Why can i only remove the last item of my LOCAL STORAGE with .FILTER为什么我只能使用 .FILTER 删除本地存储的最后一项
【发布时间】：2020-12-13 17:13:47
【问题描述】：

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

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

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

所以如果删除最后一个并刷新我得到了我的 2 个摄像头（错误无法读取）。如果我再次删除最后一个并刷新并获得最后一个相机（仍然出现错误无法读取）

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

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

请帮帮我：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();
            })

        });
    }
}

（看截图）

【问题讨论】：

你的 DOM 中是否同时包含了 basket 和 basketTable 元素？
你也可以粘贴 HTML 吗？
这是因为您正在修改 basketTable 的 html，所以它每次都会丢失按钮事件监听器

标签： javascript local-storage innerhtml

【解决方案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();
            })
            })

【讨论】：

【解决方案2】：

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

试试：

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

【讨论】：