如何通过表格首列文本删除localStorage数组中的购物车项？

嘿，我一眼就发现了两个关键问题，这就是你的删除函数无法正常工作的原因：

1. 错误的单元格文本获取方式 #

你的代码里用了jQuery(r).find("td:first").text，这里有两个明显的问题：

• .text是jQuery的方法，不是属性，必须加上括号调用：.text()
• r是删除按钮，它本身没有子元素<td>，你需要先找到按钮所在的<tr>，再获取该行的第一个单元格。可以用closest("tr")快速定位到父级表格行。

2. 数组遍历与删除的潜在问题 #

用for...in遍历数组不是最佳实践，而且当你用splice删除数组元素时，会改变数组的长度和索引，可能导致后续元素被跳过。另外，每次不匹配就弹出alert('falso')会严重影响用户体验，应该去掉或者改成仅在完全找不到匹配项时提示。

修正后的deleteRow函数 #

function deleteRow(r) {
    // 获取localStorage中的购物车数组，为空时默认赋值空数组
    var arr = JSON.parse(localStorage.getItem('item')) || [];
    // 找到按钮所在的行，再获取第一个td的文本内容（去除前后空格）
    var $row = jQuery(r).closest("tr");
    var value = $row.find("td:first").text().trim();

    // 倒序遍历数组，避免splice删除元素后索引错位
    for (var k = arr.length - 1; k >= 0; k--) {
        var name = arr[k].name;
        if (name === value) {
            arr.splice(k, 1);
            localStorage.setItem("item", JSON.stringify(arr));
            break; // 找到匹配项后直接退出循环，提升性能
        }
    }

    // 删除页面上的表格行
    var i = $row[0].rowIndex;
    document.getElementById("response").deleteRow(i);
}

关键修改说明 #

• 用closest("tr")定位到按钮所在的表格行，确保能正确获取到目标单元格的文本
• 把.text改为.text()，并加上.trim()去除文本前后可能存在的空格（避免因空格导致匹配失败）
• 改用倒序for循环遍历数组，解决splice删除元素后索引混乱的问题
• 找到匹配项后用break退出循环，避免无效遍历
• 移除了不必要的alert，如果需要提示找不到项，可以在循环结束后判断数组是否有变化再添加提示

这样修改后，点击删除按钮就能正确获取到商品名称，并删除localStorage中对应的项了。

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