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

Answer 3

node.parentNode.parentNode.removeChild(node.parentNode)

Edit: You need to to delete parent of parent, so add one more .parentNode

node.parentNode.parentNode.parentNode.removeChild(node.parentNode.parentNode)

Answer 4

Or for those who like a one-liner

<button onClick="this.parentNode.parentNode.removeChild(this.parentNode);">Delete me</button>

Answer 5

Change this:

onClick="delete_row(this)"

To this:

onClick="removeParents(this, document.getElementById('id'))"

---

function removeParents(e, root) {
    root = root ? root : document.body;
    var p = e.parentNode;
    while(root != p){
        e = p;
        p = e.parentNode;
    }
    root.removeChild(e);
}

http://jsfiddle.net/emg0xcre/

Answer 6

You can specify it even more. Instead of parentElement.parentElement you can do something like this:

static delete_row(element) { 
   element.closest("tr").remove();
}

The other preferred way of handling such scenario would be event propagation instead of adding onclick to html element:

 document.querySelector("#id").addEventListener("click", (e) => {
   UI.handleEvents(e.target);
 });

 static handleEvents(el){

   if (el.classList.contains("delete")) {
     el.closest("tr").remove();
   }
 
   if (el.classList.contains("edit")) {
     // do something else
   }
   
   if (el.classList.contains("save")){
     // save records
   }
 }

<tr id='id'>
   <td>Mohit</td>   
   <td>23</td>
   <td > 
      <span class="edit">Edit</span> | 
      <span class="delete">Delete</span>
   </td>   
   <td style="display:none;"><span class="save">Save</span></td>   
</tr>

Answer 7

I know it's a little too late, but someone else might find it useful.

 e.target.parentElement.parentElement.parentElement.remove()

Answer 8

Simple function to do this with ES6:

const removeImgWrap = () => {
    const wrappedImgs = [...document.querySelectorAll('p img')];
    wrappedImgs.forEach(w => w.parentElement.style.marginBottom = 0);
};

Answer 9

If you want to delete whatever is inside the <tr> tags, by clicking on the "Delete", give that span a class name (whatever you want).

Then, in JS code: you basically select the element people will click with the document.querySelector(), add an Event Listener to it & on clicking on that span with that .whatever class, the element with the ID name "id" will be removed.

document.querySelector('.wtvr').addEventListener('click', function () {
  document.getElementById('id').remove();
});

<table id="table">
<tr id="id">
    <td>Mohit</td>
    <td>23</td>
    <td><span>Edit</span>/<span class="wtvr">Delete</span></td>
    <td style="display: none">
        <span>Save</span>
    </td>
</tr>
</table>

I took the onclick away because you can delete a DOM element just using CSS class and a bit of JS.

Answer 10

<div>
    <span>1<button onclick="removeParents(this);">X</button></span>
    <span>2<button onclick="removeParents(this);">X</button></span>
    <span>3<button onclick="removeParents(this);">X</button></span>
    <span>4<button onclick="removeParents(this);">X</button></span>
</div>

<script>
    function removeParents(e) {
        var root = e.parentNode;
        root.parentNode.removeChild(root);
        console.log(root);
    }
</script>

working sample