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