javascript parentnode.id没有按我预期的方式工作

现在我有这个代码：

<script type="text/javascript">
   function delete_box(n) {
     document.getElementById("box"+n).style.display = "none";
   }
<script>

<div id="box1">
 <table>
  <td>some code</td><td><input type="button" value="Delete this box" onclick="delete_box(1)"></td>
 </table>
</div>

它很好用。当我按下按钮时，盒子消失了。但是，我想简化并使其如下所示：

<script type="text/javascript">
   function delete_box(n) {
     document.getElementById(n).style.display = "none";
   }
<script>

<div id="box1">
 <table>
  <td>some code</td><td><input type="button" value="Delete this box" onclick="delete_box(this.parentnode.id)"></td>
 </table>
</div>

然而，它不会像预期的那样工作。控制台说id是空的，我不知道为什么。我做错了什么

---

谢谢。

首先，属性名是.parentNode。此外，您引用了错误的祖先，因为您有一个无效的html结构。正如您在html检查器中看到的那样，浏览器已经纠正了它，因此使用您的方法，您应该编写如下内容：

delete_box(this.parentNode.parentNode.parentNode.parentNode.parentNode.id)

解释如下：这是链接到输入元素的，当您进一步使用.parentNode时，会得到td->tr->tbody->table->divbox1

---

首先，属性名为.parentNode。此外，您引用了错误的祖先，因为您有一个无效的html结构。正如您在html检查器中看到的那样，浏览器已经纠正了它，因此使用您的方法，您应该编写如下内容：

delete_box(this.parentNode.parentNode.parentNode.parentNode.parentNode.id)

解释如下：这是链接到输入元素的，当您进一步使用.parentNode时，会得到td->tr->tbody->table->divbox1

---

首先，你的HTML是无效的。td位于tr内，tr位于THAD、tbody或tfoot元素内。该元素位于表的内部

---

按钮的父级是td，而不是表。您必须查看多个父项才能获取id。

首先，您的HTML无效。td位于tr内，tr位于THAD、tbody或tfoot元素内。该元素位于表的内部

---

按钮的父级是td，而不是表。您必须查看多个父节点才能获取id。

属性名称是，而不是parentnode。您不需要查找id，只需将其传递给查找它的函数即可：您可以直接传递元素。而且，该函数只是隐藏了框；它不会删除它，我该怎么做？对不起，我不知道。hideBoxthis.parentNode；例如，instancehideBox已经是一个定义的函数？属性名是，而不是parentnode。您不需要找到id就可以将其传递给查找它的函数：您可以直接传递元素。而且，该函数只是隐藏了框；它不会删除它，我该怎么做？对不起，我不知道。hideBoxthis.parentNode；例如，Hidebox已经是一个已定义的函数了？谢谢，我不知道你必须考虑tbody，即使它不在代码中。这种遍历DOM的方法很脆弱。如何继续遍历，直到parentNode符合以下条件-类包含“cool”，id类似于“item-”？谢谢，我不知道您必须考虑tbody，即使它不在代码中。这种遍历DOM的方法很脆弱。如何继续遍历，直到parentNode符合以下条件-类包含“cool”且id类似于“item-”？