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 whe

Answer 1

Change your function like this:

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

Answer 2

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 3

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 4

Great question. This worked for me:

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

Answer 5

Or for those who like a one-liner

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

Answer 6

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

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