Right now I have this code:

<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>

It works fine. When I press the button the box disappears. However I want to simplify and have it like this:

<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>

However it wont work as intended. The console says that the id is null and I'm not sure why. What have I done wrong?

Thank you.

Right now I have this code:

<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>

It works fine. When I press the button the box disappears. However I want to simplify and have it like this:

<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>

However it wont work as intended. The console says that the id is null and I'm not sure why. What have I done wrong?

Thank you.

• javascript
• html
• parent-node

• The property name is parentNode, not parentnode. – deltab Commented Dec 4, 2014 at 3:31
• You don't need to find the id just to pass it to a function that looks it up: you can pass an element directly. (Also, the function just hides the box; it doesn't delete it.) – deltab Commented Dec 4, 2014 at 3:36
• How do i do that? Sorry, i have no idea. – Cain Nuke Commented Dec 4, 2014 at 4:41
• hideBox(this.parentNode); for instance – deltab Commented Dec 4, 2014 at 4:49
• hideBox is already a defined function? – Cain Nuke Commented Dec 4, 2014 at 4:58

2 Answers 2

At first, the property name is .parentNode. Also, you are referring to the wrong ancestor as you have an invalid html structure (browser has corrected it as you can see in the html inspector), so using you approach you should have written something like this :

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

An explanation is as follows: this is linking to the input element, as you go further up with the .parentNode you get td -> tr -> tbody -> table -> div#box1.

JSFiddle

First your HTML is invalid. A td lives inside of a tr, a tr lives inside a thead, tbody, or tfoot element. That element lives inside of a table.

The parent of the button would be a td not the table. You would have to look at multiple parents to get the id.