如何避免购物车记录重复，仅展示当前已添加商品的最新信息？

嘿，我来帮你搞定这个问题～

你现在遇到的问题根源很明确：用innerHTML +=是在原有内容后面追加新的商品信息，所以每加一个商品，旧的记录都会留在那里，自然会同时显示新旧内容啦。要只展示当前购物车的全部最新状态，我们得换个思路——每次更新购物车时，重新生成整个列表的内容，而不是往后面加。

我给你两种实用的修改方案，你可以根据自己的需求选：

方案1：维护购物车数组，每次完整渲染（推荐） #

首先我们得有一个数组来保存当前购物车的所有商品（比如叫cartItems），每次添加商品时，先更新这个数组（如果是同一件商品可以直接更新数量，避免重复条目），然后再用这个数组重新生成整个购物车列表：

// 先初始化购物车数组，放在全局或者合适的作用域里
let cartItems = [];

// 当你要添加商品时：
function addToCart(itemsDetails) {
  // 先检查购物车里有没有同款商品（用productId判断）
  const existingItem = cartItems.find(item => item.productId === itemsDetails.productId);
  if (existingItem) {
    // 如果有，就更新数量（这里是累加，你也可以改成直接替换成新数量）
    existingItem.quantity += itemsDetails.quantity;
  } else {
    // 如果没有，就把新商品加入数组
    cartItems.push(itemsDetails);
  }

  // 重新渲染整个购物车列表
  const cartListElement = document.querySelector(".js-cart-list");
  // 用map把每个商品转成字符串，再拼接起来
  const cartHtml = cartItems.map(item => 
    `${item.cartProductName} Quantity: ${item.quantity} Product ID: ${item.productId}<br>`
  ).join("");
  // 直接替换容器里的所有内容，而不是追加
  cartListElement.innerHTML = cartHtml;
}

方案2：简单清空后追加（适合临时快速修改） #

如果你暂时不想维护数组，只是想每次添加新商品后，先清空原有内容，再重新添加所有当前商品（不过这个方法需要你能拿到当前所有商品的信息）：

// 假设你能拿到当前购物车的所有商品信息，比如叫allCurrentItems
const cartListElement = document.querySelector(".js-cart-list");
// 第一步：先清空原有内容
cartListElement.innerHTML = "";
// 第二步：遍历所有当前商品，添加到容器里
allCurrentItems.forEach(item => {
  cartListElement.innerHTML += 
    `${item.cartProductName} Quantity: ${item.quantity} Product ID: ${item.productId}<br>`;
});

这样修改后，每次更新购物车时，容器里的内容都会被替换成当前所有商品的最新状态，旧记录就不会留下来啦～

备注：内容来源于stack exchange，提问作者Baljinder