Remove the parent Element of a Node using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jan 1, 2022

banner

Check out my new book

Table of Contents #

  1. Remove the Direct parent Element of a Node
  2. Remove an Indirect parent Element of a Node

Remove the Direct parent Element of a Node #

To remove the parent element of a node:

  1. Select the child node.
  2. Use the parentElement property to get access to the parent element.
  3. Call the remove() method on the parent, e.g. child.parentElement.remove().

Here is the HTML for this example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ want to remove this div --> <div> <div id="child">Child 1</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const child = document.getElementById('child'); child.parentElement.remove();

The Node.parentElement property returns the DOM node's parent element.

If the node does not have a parent, the parentElement property returns null.

If this is something you need to handle you can conditionally check before calling the remove() method.

index.js
const child = document.getElementById('child'); child?.parentElement?.remove();

We used the optional chaining (?.) operator to short-circuit instead of throwing an error if the element does not have a parent.

Note that you can access the parentElement property multiple times if the element you want to remove is not a direct parent.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ Want to remove this Div --> <div> <span> <div id="child">Child 1</div> </span> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const child = document.getElementById('child'); child.parentElement.parentElement.remove();

We accessed the parentElement property twice to get to the div element we wanted to remove.

If you need to remove the parent element without removing its children you can use this approach instead.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div style="background-color: salmon"> <div id="child">Child 1</div> <div>Child 2</div> <div>Child 3</div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const child = document.getElementById('child'); child.parentElement.replaceWith(...child.parentElement.childNodes);

To remove the parent without it's children, we basically replace the parent with its child Nodes.

Remove an Indirect parent Element of a Node #

To remove an indirect parent element of a node:

  1. Select the child node.
  2. Use the closest() method to select the indirect parent element.
  3. Call the remove() method on the parent to remove it.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ want to remove this div --> <div class="container"> <div> <span> <div id="child">Child 1</div> </span> </div> </div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const child = document.getElementById('child'); const parent = child.closest('div.container'); parent.remove();
We used the closest method instead of the parentElement property as we're trying to remove an element that isn't a direct parent.

If the element itself matches the selector, the element is returned.

If no element that matches the provided selector exists, the closest() method returns null.

The method takes a string that contains a selector. The provided selector can be as specific as necessary.

If an invalid selector string is provided to the closest() method, a SyntaxError is thrown.
I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.