jQuery 使用jQuery删除行表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2100716/
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
Delete row table using jQuery
提问by Adi Sembiring
Suppose I have a table like this
假设我有一张这样的桌子
id name address action
--------------------------------------
s1 n1 a1 delete
s2 n2 a2 delete
Delete is a link for example <a href="http://localhost/student/delete/1">. In the real case I delete the student using ajax. In order to simplify the code, I just alert the link and omit the ajax script. I just wanna know How to delete row from the html document using jquery.
例如，删除是一个链接<a href="http://localhost/student/delete/1">。在实际情况中，我使用 ajax 删除学生。为了简化代码，我只是提醒链接，省略ajax脚本。我只想知道如何使用 jquery 从 html 文档中删除行。
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $(this).attr('href');
alert(href);
event.preventDefault();
});
);
I want, After I alert the link the selected row will be remove automatically. Is there any suggestion how to implement this one ?
我想要，在我提醒链接后，选定的行将被自动删除。有什么建议如何实施这个吗？
回答by Philippe Leybaert
You don't need to call preventDefault(). Simply returning false from the event handler has the same effect.
您不需要调用 preventDefault()。简单地从事件处理程序返回 false 具有相同的效果。
To remove the row where the <a>link is located, you can call $(this).closest("tr").remove():
要删除<a>链接所在的行，可以调用 $(this).closest("tr").remove()：
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $(this).attr('href');
alert(href);
$(this).closest("tr").remove(); // remove row
return false; // prevents default behavior
});
);
回答by psychotik
Add an id to each <tr>called row_9714and add an id 9714to the link. Then in your click event handler call:
为每个<tr>被调用者row_9714添加一个 id，9714并为链接添加一个 id 。然后在您的点击事件处理程序调用中：
var thisId = $(this).attr('id');
$("#row_" + thisId).remove();
Note -- 9714 is just a dummy ID. Just use a unique number here for each row.
注意——9714 只是一个虚拟 ID。只需在此处为每一行使用一个唯一编号。
回答by Fellipe
This example removes rows from a table with JQuery.
此示例使用 JQuery 从表中删除行。
$(document).ready(function () {
$("#my_table .remove_row").click(function () {
$(this).parents("tr:first")[0].remove();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" border="1" id="my_table">
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td><button type="button" class="remove_row">X</button></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td><button type="button" class="remove_row">X</button></td>
</tr>
</tbody>
</table>