使用 jQuery 删除表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10662691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove table row using jQuery
提问by Kamal
The following is my code
以下是我的代码
Script
脚本
$(document).ready(function(){
$('#click').click(function(){
$('#table').append('<tr><td> </td></tr>');
})
$('#remove').click(function(){
$('#table').remove('<tr><td> </td></tr>');
})
})
HTML
HTML
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="table">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div id="click">click</div>
<div id="remove">remove</div>
When I add a row it works great, but I don't know how to delete the last row of the table. You can also check the online demo.
添加一行时效果很好，但我不知道如何删除表格的最后一行。您还可以查看在线演示。
How can I do this?
我怎样才能做到这一点？
In addition, I want when the user also clicks on any row it will delete itself. I have tried out, but there is a problem. If you click on the row it is deleting itself, but when you add a row by clicking in #click then the row is not deleting itself by clicking on it.
此外，我希望当用户还单击任何行时，它会自行删除。我已经试过了，但有一个问题。如果您单击该行，它会自行删除，但是当您通过单击 #click 添加一行时，该行不会通过单击来删除自身。
Here is my code:
这是我的代码：
Script
脚本
$(document).ready(function(){
$('#click').click(function(){
$('#table').append('<tr><td> </td></tr>');
})
$('#remove').click(function(){
$('#table tr:last').remove();
})
$('#table tr').click(function(){
$(this).remove();
});
})
回答by Sampson
If you want to remove the last table row of #table, you need to target it with your selector, and then call $.remove()against it:
如果要删除 的最后一行#table，则需要使用选择器将其作为目标，然后调用$.remove()它：
$('#remove').on("click", function(){
$('#table tr:last').remove();
})
回答by yokoloko
You can't remove like that you have to specify which node you want to remove $('#table tr:first')and the remove it remove()
您不能像那样删除您必须指定要删除的节点$('#table tr:first')并将其删除 remove()
$('#remove').click(function(){
$('#table tr:first').remove();
})
回答by Tats_innit
A demo is at http://jsfiddle.net/BfKSa/orin case you are binding, add and delete to every row, this different demohttp://jsfiddle.net/xuM4N/come in handy.
演示位于http://jsfiddle.net/BfKSa/或者如果您要绑定、添加和删除每一行，这个不同的演示http://jsfiddle.net/xuM4N/会派上用场。
API: remove => http://api.jquery.com/remove/
API：删除 => http://api.jquery.com/remove/
As you mentioned: This will delete the "delete the last row of the table"
正如您所提到的：这将删除“删除表格的最后一行”
$('#table tr:last').remove();will do the trick for your case.
$('#table tr:last').remove();会为你的情况做诀窍。
Code
代码
$(document).ready(function(){
$('#click').click(function(){
$('#table').append('<tr><td>foo add </td></tr>');
})
$('#remove').click(function(){
$('#table tr:last').remove();
})
})
回答by TechnicalKalsa
You can remove the last trfrom the table using the table class on button click.
您可以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> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<button id="remove">remove</button>回答by Kumar Rakesh
If You want to remove row itself when click on table row then
如果您想在单击表格行时删除行本身，则
$('table tr').on("click", function(){
$(this).remove();
});
If you want to add row on click of click button at the end of table
如果您想通过单击表格末尾的单击按钮添加行
$('#click').click(function(){
$('#table').append('<tr><td>Xyz</td></tr>');
})
回答by Itay Grudev
Find the last row with a selector and the delete that row like that:
找到带有选择器的最后一行，然后像这样删除该行：
$('#table > tr:last').remove();
This will delete the last row in the table. What if you want to delete the first?
这将删除表中的最后一行。如果你想删除第一个怎么办？
$('#table > tr:first').remove();
That's it. There is codeschool online course for jQuery. You will find lot's of valuable stuff there including selectors and DOM manipulation. Here is a link: http://jqueryair.com/
就是这样。有 jQuery 的 codeschool 在线课程。你会在那里找到很多有价值的东西，包括选择器和 DOM 操作。这是一个链接：http: //jqueryair.com/
