如何从localStorage中移除购物车对应表格行的数据

首先得说，你现在的代码有两个小问题：一是每次循环都生成一个带相同id="cart_table"的表格，这不符合HTML规范（id必须唯一），而且表头会重复出现；二是removeFromCart函数没有办法定位到要删除的具体商品。咱们一步步来改：

1. 先修复购物车展示的HTML结构 #

把表格的表头抽出来只渲染一次，商品行放在tbody里循环生成，这样结构更清晰，也避免了重复id的问题：

function displayCart() {
  // 先清空购物车容器，避免重复渲染旧内容
  $('#cart').empty();
  
  var jsonData = JSON.parse(localStorage.getItem('cart')) || [];
  
  // 处理购物车为空的情况，显示友好提示
  if (jsonData.length === 0) {
    $('#cart').append('<p>Your cart is empty</p>');
    return;
  }
  
  // 创建表格基础结构，表头仅渲染一次
  var tableHtml = `
    <table id="cart_table" border="10">
      <thead>
        <tr>
          <th scope="col">Movie Title</th>
          <th scope="col">Date</th>
          <th scope="col">Time</th>
          <th scope="col">Cinema</th>
          <th scope="col">Price</th>
          <th scope="col">Seat Number</th>
          <th scope="col">Remove</th>
        </tr>
      </thead>
      <tbody>
  `;
  
  // 循环每一项商品，生成对应表格行
  $.each(jsonData, function(index, value) {
    tableHtml += `
      <tr data-index="${index}">
        <td class="Movie_Title">${value.Movie_Title}</td>
        <td class="Date">${value.date}</td>
        <td class="Time">${value.time}</td>
        <td class="Cinema_number">${value.cinema_number}</td>
        <td class="Price">${value.price}</td>
        <td class="seat_number">${value.seat_number || '-'}</td>
        <td><button onclick="removeFromCart(${index})">Remove Item</button></td>
      </tr>
    `;
  });
  
  // 闭合表格标签
  tableHtml += '</tbody></table>';
  
  // 将表格添加到购物车容器中
  $('#cart').append(tableHtml);
}

这里做了几个实用优化：

• 每次渲染前清空容器，防止重复添加商品
• 表头与商品行分离，符合HTML语义规范
• 给每个商品行加上data-index属性，同时给删除按钮传入当前商品的索引，让函数能精准定位要删除的项
• 空座位号显示-，避免界面出现空白
• 处理了购物车为空的边界情况

2. 实现removeFromCart函数 #

现在我们可以通过索引定位到目标商品，删除后更新localStorage，最后重新渲染购物车让界面同步：

function removeFromCart(index) {
  // 从localStorage获取购物车数据，为空时默认返回空数组
  var cart = JSON.parse(localStorage.getItem('cart')) || [];
  
  // 删除对应索引的商品项
  cart.splice(index, 1);
  
  // 更新localStorage中的购物车数据
  localStorage.setItem('cart', JSON.stringify(cart));
  
  // 重新渲染购物车，让界面同步最新状态
  displayCart();
}

为什么用索引？ #

因为你的购物车数据里可能存在同名电影但不同场次的情况（比如同一电影不同日期/时间），用索引是最直接准确的定位方式。如果后续担心索引因数据变化失效，也可以用Movie_Title + date + time + cinema_number组合作为唯一标识，但索引在当前场景下已经足够好用。

3. 额外提示 #

• 记得在页面加载完成后调用displayCart()，比如：$(document).ready(function() { displayCart(); });，这样页面打开时就能展示购物车内容
• HTML标签尽量用小写（比如<button>而非<Button>），虽然浏览器兼容，但小写更符合规范
• 如果后续添加选座功能，更新座位号后也要同步更新localStorage并重新渲染购物车

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