JavaScript购物车删除按钮点击未删除反而新增条目问题求助

问题根因 #

你遇到的删除后出现重复条目的核心原因是每次渲染列表前没有清空容器中的旧内容：每次调用renderItems()函数时，都是直接向shoppingListContainer节点追加新生成的元素，之前渲染的旧条目不会被自动移除，修改后的新列表和旧列表内容叠加，就会出现条目重复、目标条目看起来未删除的现象。

修复方案 #

只需要在renderItems()函数遍历生成列表前，先清空shoppingListContainer的所有子节点即可，修改后的代码如下：

function renderItems() {
    // 新增：先清空容器内的旧内容
    shoppingList.innerHTML = '';
    // 补充let声明循环变量i，避免默认成为全局变量造成作用域污染
    for (let i = 0; i < nameArray.length; i++) {
        var row = document.createElement("div");
        row.setAttribute("class", "row");

        var col2 = document.createElement("div");
        var col3 = document.createElement("div");

        col2.setAttribute("class", "col-8 item-name");
        col3.setAttribute("class", "col-2 item-delete");

        var newButton = document.createElement('button');
        newButton.textContent = 'Delete';
        newButton.setAttribute("data-item-idx", i);
        newButton.addEventListener('click', function(event){
            console.log(event.target.dataset.itemIdx)
            var selectedItem = parseInt(event.target.dataset.itemIdx);
            
            nameArray.splice(selectedItem, 1);
            console.log(nameArray);
            renderItems();
        })

        col2.textContent = nameArray[i];
        col3.appendChild(newButton);

        row.appendChild(col2);
        row.appendChild(col3);

        shoppingList.appendChild(row);
    }
}

其他可优化的潜在问题 #

• 代码中saveItems的点击事件里用到的entry、newArray变量没有定义，后续使用保存功能时需要补充对应变量的声明赋值
• 开头的变量声明var saveOfItem = document.getElementById("nameOfItem");和上一行选择了同一个DOM节点，属于冗余代码可以删除

内容的提问来源于stack exchange，提问作者Brandon