单击行中的元素时，从行中移除行。
提问于 2011-11-16 10:59:02
我有一个项目列表，我将以表行的形式呈现给用户。
每行右上角都有一个小的“x”图像，点击后会导致以下行为：
如果用户想要删除行
- (是/取消)，如果用户单击“取消什么都没有发生”，则提示用户删除行，如果是，则删除该行并更新表。
html看起来如下所示：
<html>
<head>
<script type="text/javascript" src = jquery.js"></script>
</head>
<body>
<table><tbody>
<tr>
<td><div class="delbtn"></div>
<div class="rowitem">This one line item</div>
</tr>
<tr>
<td><div class="delbtn"></div>
<div class="rowitem">This another line item</div>
</tr>
<tr>
<td><div class="delbtn"></div>
<div class="rowitem">blah, blah, blah</div>
</tr>
</tbody>
</table>
<script type="text/javascript">
$().ready(function(){
// What to do ?
});
</script>
</body>
</html>显然，我必须绑定到div.delbtn模式，但是如何知道被单击的行，以及如何从表中删除该行？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-11-16 11:02:11
$().ready(function() {
$('.delbtn').click(function() {
$(this).parent('tr').remove();
});
});不需要“知道”单击了哪一行，因为每个DOM节点都知道它的父节点是谁，并且可以使用.parent()向DOM树移动，以查找特定的祖先。在这种情况下，您想要对一行进行核弹，因此要查找一个祖先<tr>，其中的节点单击时发生在其中。
Stack Overflow用户
发布于 2011-11-16 11:04:27
试着-
$(document).ready(function() {
$(".delbtn").click(function() {
$(this).closest('tr').remove();
})
});Stack Overflow用户
发布于 2011-11-16 11:21:47
如果有多行或打算在加载页面后添加/删除行，则应使用委托。它将只将一个侦听器绑定到表，而不是将侦听器绑定到每一行。在该表标记上设置一个id (例如，myTable)并执行：
$(document).ready(function() {
$('#myTable').delegate('tr .delbtn', 'click', function () {
$(this).parent('td').parent('tr').remove();
});
});另外，不要忘记关闭那些td标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8157120
复制
腾讯云开发者
