如何移除购物车中具有相同Rope_ID的所有商品？

完全可以实现这个需求，下面是针对你提供的购物车数据结构的最优解决方案，代码逻辑清晰，适配常见电商购物车操作：

核心思路 #

• 拦截购物车商品的默认删除行为
• 获取被删除商品对应的Rope_ID
• 筛选出购物车中所有拥有该Rope_ID的商品
• 批量移除这些商品并更新购物车状态

具体代码实现 #

// 监听所有购物车删除按钮的点击事件
document.querySelectorAll('.cart-item__remove-btn').forEach(button => {
  button.addEventListener('click', async (e) => {
    // 阻止默认的单个商品删除动作
    e.preventDefault();
    
    // 获取当前点击商品的Rope_ID（假设按钮父元素有存储该属性的DOM节点）
    const cartItem = button.closest('.cart-item');
    const ropeId = cartItem.querySelector('[data-rope-id]').dataset.ropeId;
    
    // 1. 获取当前购物车完整数据
    const cartRes = await fetch('/cart.js');
    const cartData = await cartRes.json();
    
    // 2. 筛选出所有同Rope_ID的商品key
    const targetKeys = cartData.items
      .filter(item => item.properties?.Rope_ID === ropeId)
      .map(item => item.key);
    
    // 3. 批量删除：通过购物车API将目标商品数量设为0
    await fetch('/cart/update.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        updates: targetKeys.reduce((obj, key) => {
          obj[key] = 0;
          return obj;
        }, {})
      })
    });
    
    // 4. 更新页面购物车展示（局部刷新或整页刷新）
    location.reload();
  });
});

代码说明 #

• 事件拦截：绑定删除按钮点击事件，阻止默认的单个删除逻辑
• Rope_ID提取：从页面DOM节点获取对应值，渲染购物车时可给每个商品项添加data-rope-id="${item.properties.Rope_ID}"属性来实现
• 批量删除：利用购物车更新接口，一次性将所有目标商品数量设为0，避免多次API调用，效率更高
• 页面同步：通过刷新页面或局部更新购物车区域，让用户看到最新状态

适配提示 #

如果使用的不是Shopify平台，只需替换购物车数据获取和更新的API地址，核心的数组筛选（filter+map）逻辑完全通用。

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