html - 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);
}