删除父容器

remove parent container

本文关键字：删除      更新时间：2023-09-26

我有一个表格，表格单元格中有字段。在每行的最后一列，我都有一个图像。单击该图像时，我希望删除父<tr>。在我尝试通过生成一个函数来实现这一点之前，该函数将行号onclick='delete_row(x, y)'作为参数传递。这显然不是一个好的解决方案，因为我是按行的位置删除的。我调用的函数还有2个参数，因为它也删除了数据库中的行，所以第二个参数是要删除的数据库中的id。因此，基本上我需要一个删除父<tr>并接受其他参数的函数。

编辑感谢：谢谢大家，我尝试了几乎所有的解决方案，效果都很好。我刚刚决定选择Mike的Samuel，这似乎是最简单的：）再次感谢

要传递当前节点的祖父母，请使用this.parentNode.parentNode:

<tr><td><img onclick="delete_row(this.parentNode.parentNode, ...)"></td></tr>

删除最近的<tr>怎么样？您需要对您的代码中的选择器进行调整，但一般形式如下：

$('img').click(function(){
  $(this).closest('tr').remove();
});

您可以很容易地使用HTML节点方法.removeChild()并遍历节点的.parentNode s：（demo）：

<td onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
    Remove row
</td>

this.parentNode.parentNode将是<table>或<tbody>，而this.parentNode是父容器<tr>。

更新：rjz提供了一个简洁的功能（演示）：

window.removeClosestRow = function(node) {
    while(node = node.parentNode) {
        if (node.tagName.toUpperCase() == 'TR') {
           node.parentNode.removeChild(node);
           break;
        }
    }    
}

尝试类似的东西

onClick='MyDeleteFunc(this, var2, var3)';

这将把你点击的实际对象传递给javascript，你可以从那里获得几乎所有的引用。

相关文章：