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.