Javascript - 从表中删除项目名称？

Question

所以我有一张 table 。通过单击按钮，信息将添加到此处，因此每个项目还有 X 按钮，可将其从列表中删除。我一直在尝试这样做，如果您单击该 X 按钮，那么它将输出到控制台您删除的项目名称。我怎样才能做到这一点？

这是函数

function sitaSeen(img, name, condition, price) {
  $('tbody').append("<tr id='itemCart'><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");

当必须添加项目时调用该函数。

这是 X 按钮代码

$(document).ready(function() {
    $('.sweet-container').on('click', 'tr span', function(){
        var removedname = $(this).closest('tr').ignore('span').text();
        console.log(removedname);
        $(this).closest('tr').remove();
    });
});

我也尝试过，但没成功。

Answer 1

jQuery 中没有 ignore() 方法，因此它会在控制台中抛出错误。因此，要么克隆 tr 并从克隆对象中删除 span，然后获取文本，要么获取所有不包含 span 的 td 并获取文本。

$(document).ready(function() {
    $('.sweet-container').on('click', 'tr span', function(){
        var removedname = $(this).closest('tr').clone().remove('span').text();
        // or
        // var removedname = $(this).closest('tr').find('td:not(:has(span))').text();
        console.log(removedname);
        $(this).closest('tr').remove();
    });
});

<小时/>

更新:由于您只想要第二列，因此您可以简单地使用 :nth-child 或 :eq() 选择器(或 eq() )。

$(document).ready(function() {
    $('.sweet-container').on('click', 'tr span', function(){
        var removedname = $(this).closest('tr').find('td:nth-child(2)').text();
        // or
        // $(this).closest('tr').find('td:eq(1)').text();
        // or
        // $(this).closest('tr').children().eq(1).text();
        console.log(removedname);
        $(this).closest('tr').remove();
    });
});