JS购物车删除功能点击后清空全部商品而非单个商品问题求助

你遇到的删除所有商品的问题，核心是两个错误叠加导致的：

• 重复绑定点击事件：你在cartProducts函数末尾每次渲染单个商品时，都会调用removeItem()。比如购物车有3件商品，你就会调用3次removeItem，每次调用都会给所有已存在的删除按钮新增一次点击事件。最终第一个商品的删除按钮会被绑定3次点击事件，点击一次就会执行3次删除逻辑，自然会清空所有商品；只有最后一个商品的删除按钮只绑定了1次事件，所以删除逻辑正常。
• 使用索引匹配商品不可靠：你删除时用的是删除按钮在列表中的索引去匹配localStorage里的商品，一旦数组顺序变化或者索引错乱，很容易删错商品。

步骤1：移除重复的事件绑定调用 #

找到cartProducts函数末尾的代码，删掉removeItem()的调用：

// 删掉这行 removeItem();
emptyCart();
qteChange();

等所有购物车商品全部渲染完成后，只调用一次removeItem()即可。如果要处理异步fetch的渲染顺序问题，更推荐直接用事件委托的方式绑定删除事件，不需要等所有元素加载完成。

步骤2：修改删除逻辑，用商品ID匹配代替索引匹配 #

将removeItem函数改成如下逻辑，用父元素事件委托避免重复绑定，同时用商品的data-id精准匹配要删除的商品：

function removeItem() {
  // 直接给购物车容器绑定事件，不用循环给每个删除按钮绑定，后续新增商品也不用重新绑定
  cartItems.addEventListener("click", (e) => {
    // 判断点击的是删除按钮
    if (e.target.classList.contains("deleteItem")) {
      e.preventDefault();
      // 获取当前商品的ID
      const currentArticle = e.target.closest("article");
      const currentProductId = currentArticle.dataset.id;
      // 移除页面元素
      currentArticle.remove();
      // 过滤localStorage里的商品，删除对应ID的商品
      const products = JSON.parse(localStorage.getItem("products")) || [];
      const updatedProducts = products.filter(item => item.id !== currentProductId);
      localStorage.setItem("products", JSON.stringify(updatedProducts));
      
      alert("该商品已从购物车移除");
      // 不用刷新页面也可以更新总价数量，有需要再保留这行
      // window.location.href = "cart.html";
    }
  })
}
// 页面初始化时调用一次即可
removeItem();

修复后点击任意商品的删除按钮，只会删除对应ID的单个商品，不会出现重复执行删除的问题。

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