对父节点感到困惑答案

【问题标题】：confuse about the parentNode对父节点感到困惑
【发布时间】：2016-04-28 16:38:16
【问题描述】：

我对 JS 中的 parentNode 感到困惑。这是我的代码。

<table border="1" width="50%" id="table">
   <tr>
    <th>id</th>
    <th>name</th>
    <th>del</th>
   </tr>  

   <tr>
    <td>001</td>
    <td>Kevin</td>
    <td><a href="javascript:;" onclick="del(this);">del</a></td>   
   </tr>

和JS代码：

function del(obj){
     var tr = obj.parentNode.parentNode;
     tr.parentNode.removeChild(tr)
 }

代码有效，我认为obj 指的是<a> 标记，obj.parentNode 指的是<td>标记，obj.parentNode.parentNode 指的是<tbody>标记。所以tr.parentNode.removeChild(tr) 意味着删除<tr>tag。我说的对吗？

问题是，如果我像这样更改代码。它不起作用。

function del(obj){
     var tr = obj.parentNode.parentNode.parentNode;
     tr.removeChild(tr)
 }

【问题讨论】：

节点 (tr) 不能是其自身 (tr) 的子节点（除非时间旅行）。

标签： javascript html

【解决方案1】：

原因

tr.removeChild(tr)

不起作用是因为tr 不是tr 的子代，即它本身。但是，tr.parentNode.removeChild(tr) 有效，因为tr 显然是tr.parentNode 的子代。

【讨论】：

谢谢！我可以问另一个问题吗？如果我想使用del() 而不是del(this)（不太清楚“this”，我是初学者）如何更改function()？
如果你没有像del(this)那样在del里面传递this，那么在里面你将不得不以某种方式找到点击的TD，如果TD没有任何类或id，这不是很方便，等等，例如用 document.querySelector 方法来识别它。但是，您可以使用此 onclick="del.call(this)" 并且函数内部 this 将指向 obj 不是。

【解决方案2】：

removeChild 将在调用该函数的节点中查找节点。换句话说 tr.removeChild 正在寻找 tr inside of tr。试试这个：

var tr = obj.parentNode.parentNode;
var trParent = tr.parentNode;
trParent.removeChild(tr);

【讨论】：

【解决方案3】：

我不得不处理同样的问题，而答案令人困惑反直觉。好吧，它有其逻辑，但会导致不平凡行为。

本质上，当一个节点从 DOM 树中移除时，它会触发一个模糊事件（以及在焦点事件之前）。

所以，当您调用 removeChild 时，会再次触发 blur 事件，但这时间链接仍然定义了它的父节点，但链接不在它的父母的孩子了！（是的，读两遍。或者更多。）

Failed to execute 'removeChild' on 'Node'的回答

【讨论】：

这似乎与这里提出的问题无关。此外，这里也不允许简单地复制答案。