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

Question

现在我有这个代码：

<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 为空，我不知道为什么。我做错了什么？

谢谢你。

Answer 1

起初，属性名称是.parentNode。此外，您指的是错误的祖先，因为您的 html 结构无效（浏览器已更正它，正如您在 html 检查器中看到的那样），因此使用您的方法，您应该编写如下内容：

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

解释如下：this正在链接到input元素，当您进一步向上时，.parentNode您会得到td-> tr-> tbody-> table-> div#box1。

JSFiddle

Answer 2

首先，您的 HTML 无效。Atd存在于 atr中，atr存在于 a thead、tbody或tfoot元素中。该元素位于table.

按钮的父级td不是table. 您必须查看多个父母才能获得身份证。