移除父容器答案

【问题标题】：remove parent container移除父容器
【发布时间】：2012-03-17 16:09:19
【问题描述】：

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

编辑谢谢：谢谢大家，我尝试了几乎所有的解决方案，一切都很好。我刚决定买迈克的塞缪尔，这似乎是最简单的:) 再次感谢

【问题讨论】：

您应该始终在问题中包含您尝试过的代码
抱歉，Michal，我没有包含任何代码，因为我没有 :) 我只是不知道该怎么做 :) 感谢您的观察。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以轻松使用 HTML 节点方法 .removeChild() 并遍历节点的 .parentNodes: (demo):

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

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

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

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

【讨论】：

如果事件处理程序位于表格单元格上，但事件处理程序位于单元格内的图像上，这将起作用。
我认为这个想法仍然有效，但你会想要递归到parentNode.tagName=='TR'，而不是只是复制粘贴parentNode. :^)
Mike：嗯，他可以很容易地使用this.parentNode.parentNode.parentNode，虽然这有点难读。 rjz：是的，我在做小提琴，但我现在很着急，所以我无法完成它：/.

【解决方案4】：

试试类似的东西

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

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

【讨论】：

...我不介意被否决，但为什么呢？这是完全有效的东西。