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

谢谢。

Answer 1

首先，属性名称为.parentNode。此外，你指的是错误的祖先，因为你有一个无效的html结构（浏览器已经纠正了它，你可以在html检查器中看到），所以使用你的方法你应该写这样的东西：

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

解释如下：this链接到input元素，因为您进一步了解.parentNode获得td - ＆gt; tr - ＆gt; tbody - ＆gt; table - ＆gt; div#box1。

JSFiddle

Answer 2

首先，您的HTML无效。 td位于tr内，tr位于thead，tbody或tfoot元素内。该元素位于table内。

按钮的父级是td，而不是table。您必须查看多个父母才能获得ID。

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

2 个答案:

JSFiddle