如何实现购物车商品点击删除功能？——JavaScript本地存储购物车的删除逻辑问题

你的移除商品功能失效主要有几个核心问题：

• cartItems是对象而非数组：从你用Object.values(cartItems).map遍历可以看出，存在localStorage里的productsIncart是一个键值对对象（比如{ "product-tag-1": {...}, "product-tag-2": {...} }），而splice是数组方法，不能用于对象，这是最根本的错误。
• 依赖遍历索引定位商品不可靠：对象的遍历顺序在不同环境下可能不稳定，用cartIndex作为删除依据会导致删除错误的商品。
• 缺少总价更新逻辑：删除商品后没有重新计算并更新totalCost，会导致购物车总价显示错误。

下面是具体的修复步骤：

1. 修改删除按钮的点击参数 #

在displayCart函数中，把点击事件传递的cartIndex替换为商品的唯一标识（比如你代码里的item.tag，它是商品图片的路径标识，应该是唯一的）：

// 把原来的 onclick="removeItem(event,${cartIndex++})" 修改为：
onclick="removeItem(event,'${item.tag}')"

2. 重写removeItem函数 #

现在我们通过商品的唯一标识来删除对象中的对应属性，同时更新总价：

function removeItem(event, productTag){
  // 阻止可能的默认行为（比如SVG元素的默认事件）
  event.stopPropagation();
  
  // 获取购物车数据
  let cartItemsJson = localStorage.getItem("productsIncart");
  let cartItems = JSON.parse(cartItemsJson);
  
  // 检查商品是否存在，存在则删除
  if(cartItems[productTag]){
    delete cartItems[productTag];
    
    // 更新localStorage中的购物车数据
    localStorage.setItem('productsIncart', JSON.stringify(cartItems));
    
    // 重新计算并更新总价
    updateCartTotalCost(cartItems);
    
    // 重新渲染购物车
    displayCart();
  }
}

3. 添加总价更新函数 #

新增一个函数来重新计算购物车总价，确保删除商品后总价同步更新：

function updateCartTotalCost(cartItems){
  let totalCost = 0;
  // 遍历所有商品计算总价
  Object.values(cartItems).forEach(item => {
    totalCost += item.price * item.inCart;
  });
  // 更新localStorage中的总价
  localStorage.setItem('totalCost', totalCost);
}

额外优化：处理购物车为空的情况 #

当删除最后一个商品后，cartItems会变成空对象，你可以在displayCart函数中添加判断，显示购物车为空的提示：

if(cartItems && productContainer){
  // 如果购物车为空
  if(Object.keys(cartItems).length === 0){
    productContainer.innerHTML = '<p>你的购物车是空的~</p>';
    return;
  }
  
  // 原来的渲染逻辑...
}

这样修改后，点击删除按钮就能正确移除对应商品，同时购物车总价也会同步更新啦！

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