Question

所以我有一张桌子。通过单击按钮，将在那里添加信息，因此每个项目也有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();
    });
});

Answer 2

我认为最好使用：

``` //更好的方法来获取tr元素

var trElem = $（this）.parentNode.parentNode; ```

parentNode属性是访问元素父级的更好方法。

Answer 3

项目名称是第二个td，因此您可以使用：

var removedname = $(this).closest('tr').find('td:eq(1)').text();

因为ID必须是唯一的，所以我在你的函数中添加了一个新参数。

＆＃13;

function sitaSeen(seq, img, name, condition, price) {
  $('tbody').append("<tr id='itemCart" + seq + "'>" +
                    "<td><img src=" + img + "></td>" +
                    "<td>" + name + seq + "</td>" +
                    "<td>" + condition + "</td>" +
                    "<td>$" + price + "</td>" +
                    "<td><span>X</span></td>" +
                    "</tr>");
}
$(function () {
  $('#addRow').on('click', function(e) {
    var seq = +$(this).attr('data-seq');
    $(this).attr('data-seq', seq + 1);
    sitaSeen(seq, 'img', 'name', 'condition', 'price');
  });

  $('.sweet-container').on('click', 'tr span', function(){
    var removedname = $(this).closest('tr').find('td:eq(1)').text();
    console.log(removedname);
    $(this).closest('tr').remove();
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<div class="sweet-container">
    <button id="addRow" data-seq="1">Add Row</button>
    <table>
        <tbody>

        </tbody>
    </table>
</div>

＆＃13;

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

3 个答案: