How to remove the parent element using plain Javascript

Question

How do I remove the parent element and all the respective nodes using plain JavaScript? I'm not using jQuery or any other library. In other words, I have an element and when user clicks on it, I want to remove the parent of the parent element (as well as the respective children nodes).

<table id='table'>     <tr id='id'>         <td>             Mohit         </td>            <td>             23         </td>            <td >         <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>         </td>            <td style="display:none;">             <span onClick="save(this)">Save</span>         </td>        </tr>    </table>     

Now,

function delete_row(e) {     e.parentNode.parentNode.removeChild(e.parentNode); } 

Will remove only last <td>.

How do I remove the <tr> directly>?

e.parentNode.parentNode.getAttribute('id') 

returns the id of the row...

Is there any function like remove() or delete() ?

Answer 1

Change your function like this:

function delete_row(e) {     e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); } 

Answer 2

You can now use node.remove() to remove the whole element so in your case you'd do

function delete_row(e) {     e.parentElement.remove(); } 

You can read more on it here https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove