jQueryを使用してテーブル行を削除する - jquery

以下は私のコードです

スクリプト

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table").remove("<tr><td>&nbsp;</td></tr>");
})
})

HTML

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>

行を追加するとうまくいきますが、表の最後の行を削除する方法がわかりません。オンラインで確認することもできます デモ.

これどうやってするの？

さらに、ユーザーがクリックしたときに欲しい行自体が削除されます。試しましたが、問題があります。行をクリックすると、それ自体が削除されますが、＃clickをクリックして行を追加すると、行をクリックしても行は削除されません。

ここに私のコードです：

スクリプト

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table tr:last").remove();
})
$("#table tr").click(function(){
$(this).remove();
});
})

回答：

最後のテーブル行を削除する場合 #table、セレクターでターゲットを設定してから呼び出す必要があります $.remove() それに対して：

$("#remove").on("click", function(){
$("#table tr:last").remove();
})

削除したいノードを指定する必要があるような削除はできません $("#table tr:first") そしてそれを削除する remove()

$("#remove").click(function(){
$("#table tr:first").remove();
})

http://jsfiddle.net/2mZnR/1/

デモは http://jsfiddle.net/BfKSa/ または すべての行にバインド、追加、削除する場合は、これ 別のデモ http://jsfiddle.net/xuM4N/ 便利です。

API：削除=> http://api.jquery.com/remove/

あなたが述べたように：これは「テーブルの最後の行を削除」を削除します

$("#table tr:last").remove(); あなたのケースのためのトリックを行います。

コード

$(document).ready(function(){
$("#click").click(function(){
$("#table").append("<tr><td>foo add&nbsp;</td></tr>");
})
$("#remove").click(function(){
$("#table tr:last").remove();
})
})

セレクターで最後の行を見つけて、そのような行を削除します：

$("#table > tr:last").remove();

これにより、テーブルの最後の行が削除されます。最初のものを削除したい場合はどうしますか？

$("#table > tr:first").remove();

それだけです。jQueryのコードスクールオンラインコースがあります。セレクターやDOM操作など、貴重なものがたくさんあります。リンクは次のとおりです。 http://jqueryair.com/

最後を削除できます tr ボタンクリックでテーブルクラスを使用してテーブルから。

$("#remove").on("click", function(){
$(".tbl tr:last").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" >
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<button id="remove">remove</button>

テーブルの行をクリックして行自体を削除する場合

$("table tr").on("click", function(){
$(this).remove();
});

テーブルの最後にあるクリックボタンのクリックで行を追加する場合

 $("#click").click(function(){
$("#table").append("<tr><td>Xyz</td></tr>");
})