3

appendを使用してテーブルにデータを追加しています。追加した各行を1つずつ削除できるようにしたいと思います。ただし、現在の動作方法では、すべての子が削除されます。私は何が間違っているのですか？

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
});

    });

})();
4

3 に答える 3

4

jQuery でlast()を使用できます。

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

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

于 2012-12-20T22:04:21.477 に答える
1

最後の行を削除するには、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();
    });
})();
于 2012-12-20T22:06:08.207 に答える
1

説明

最後の子を削除するには、いくつかの方法があります。

:last-childセレクターまたはlast()メソッドのいずれかを使用できます

サンプル

:最後の子サンプル

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

jsフィドル

last() サンプル

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

jsフィドル

于 2012-12-20T22:06:10.383 に答える