购物车商品添加与移除优化：精准移除对应商品标题

当然可以通过属性绑定的方式实现精准匹配，核心思路是给每个商品项和对应的购物车标题元素绑定唯一标识（比如data-id属性），让两者一一对应，取消选中时直接找到对应标识的标题移除即可。下面是具体操作步骤：

1. 给商品项添加唯一标识属性 #

先在HTML里给每个.cart_item加上唯一的data-id，同时确保商品标题有可获取的选择器：

<!-- 商品项 -->
<div class="cart_item" data-id="goods_001">
  <h4 class="goods_title">商品A - 限量款</h4>
</div>
<div class="cart_item" data-id="goods_002">
  <h4 class="goods_title">商品B - 经典款</h4>
</div>

<!-- 购物车容器 -->
<div id="cart"></div>

2. 编写jQuery点击逻辑 #

通过点击事件切换选中状态，同时根据data-id精准操作购物车中的标题：

$('.cart_item').on('click', function() {
  // 切换选中状态（用active类标记）
  $(this).toggleClass('active');
  
  // 获取当前商品的唯一ID和标题文本
  const currentId = $(this).data('id');
  const currentTitle = $(this).find('.goods_title').text();
  const $cart = $('#cart');

  if ($(this).hasClass('active')) {
    // 选中时：往购物车添加带对应data-id的标题元素
    $cart.append(`<p class="cart_goods" data-id="${currentId}">${currentTitle}</p>`);
  } else {
    // 取消选中时：精准移除购物车中对应data-id的标题
    $cart.find(`.cart_goods[data-id="${currentId}"]`).remove();
  }
});

3. 补充说明 #

• data-id的值可以用后端返回的商品ID，或者自己生成唯一字符串，只要保证每个商品不重复就行
• 可以给.active类加CSS样式，比如background: #f5f5f5;，让选中状态更直观
• 这种方式完全避免了“取消选中就删光所有标题”的问题，每一步操作都只针对当前商品对应的元素

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