CODEWITHSUNDEEP
javascripthtmlparent-node
Cain Nuke
Cain Nuke

Reputation: 3089

javascript parentnode.id not working the way i expected

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.

Upvotes: 1

Views: 16977

Answers (2)

epascarello
epascarello

Reputation: 207521

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.

Upvotes: 0

potashin
potashin

Reputation: 44581

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

Upvotes: 5

Related Questions