jquery - Jquery 使用 each 迭代器

Question

我正在使用 append 将数据附加到表中。我希望能够删除我一一追加的每一行。但是它现在的工作方式是删除所有孩子。我究竟做错了什么？

http://jsfiddle.net/HjFPR/44/

<table class="" width="300" border="0" cellpadding="0" cellspacing="0">

<tr><th>Date</th><th>Pokemanz</th><th align="right" style="text-align:right;">Value</th></tr>



<tr><td style="width:62px;"><input type="text" 
class="transactions_date" size="15" value="4/5/12"/>
</td><td><input type="text" class="transaction_title" size="30" 
value="Pickachu"/></td><td align="right">
<input type="text" class="transactions_amount" size="10" value="$25"/></td></tr>

</table>
<div class="new_transaction"></div>
<input type="button"  value ="Add Transaction"  id="add_trans"/> 
<input type="button"  value ="Delete Transaction" id="delete_trans" /> 

​</p>

(function() {

    $('#add_trans').on('click',function () {

        $('.new_transaction').append('<tr><td style="width:62px;"><input type="text" class="transactions_date" size="15" value=""/></td><td> <input type="text" class="transaction_title" size="30" value=""/></td><td align="right"><input type="text" class="transactions_amount" size="10" value=""/></td></tr>');


    });

    $('#delete_trans').on('click',function () {

    $('.new_transaction').children().each(function () {
    $(this).remove(); // "this" is the current element in the loop
});

    });

})();

Answer 1

您可以在 jQuery中使用last() ：

$('#delete_trans').on('click',function () {
    $('.new_transaction tr').last().remove();
});

http://jsfiddle.net/HjFPR/49/

Answer 2

要删除最后一行，您需要使用 jQuery last选择器。而且，鉴于此，您不需要 each 语句，因此执行起来更加简单：

(function() {
    $('#add_trans').on('click',function () {
        $('.new_transaction').append('<tr><td style="width:62px;"><input type="text" class="transactions_date" size="15" value=""/></td><td> <input type="text" class="transaction_title" size="30" value=""/></td><td align="right"><input type="text" class="transactions_amount" size="10" value=""/></td></tr>');
    });

    $('#delete_trans').on('click',function () {
        $('.new_transaction tr').last().remove();
    });
})();

Answer 3

描述

有几种方法可以删除最后一个孩子。

您可以使用:last-child选择器或last()方法

样品

:last-child 样本

$('#delete_trans').on('click',function () {
    $('.new_transaction').children(":last-child").remove();
});

jsFiddle

最后一个（）样本

$('#delete_trans').on('click',function () {
    $('.new_transaction').children().last().remove();
});

jsFiddle