Skip to main content

How to Remove a Parent Element of a Node in JavaScript

When manipulating the DOM, you often need to remove elements. While removing an element itself is easy, sometimes you need to remove its parent or a more distant ancestor. For example, clicking a "close" icon inside a <div> might need to remove the entire <div>.

This guide will teach you the modern, standard methods for three distinct but related tasks: removing a direct parent (and all its children), removing a parent while keeping its children, and finding and removing a specific ancestor element.

Task 1: Remove a Parent Element and all its Children​

This is the most common scenario. You have a reference to a child element and you want to remove its immediate parent from the DOM.

Problem: you have a "close" button inside a notification div, and clicking it should remove the entire notification.

<div class="notification">
  This is a notification.
  <button class="close-btn">Close</button>
</div>

Solution: use the Node.parentElement property to get the parent, and then call the .remove() method on it.

const closeButton = document.querySelector('.close-btn');

closeButton.addEventListener('click', function() {
  // `this` refers to the button that was clicked.
  // `this.parentElement` is the div with the 'notification' class.
  const parentNotification = this.parentElement;
  
  if (parentNotification) {
    parentNotification.remove();
  }
});

This is a clean and direct solution. It's a good practice to check if parentElement exists before calling .remove() to prevent errors if the element has no parent. You can do this more concisely with optional chaining (?.):

closeButton.addEventListener('click', function() {
  this.parentElement?.remove();
});

Task 2: Remove a Parent Element but Keep its Children​

Sometimes you need to "unwrap" the children of an element by removing their container. For example, you might want to remove a <span> or <div> wrapper from around a set of paragraphs.

Problem: you want to remove the <div id="wrapper"> but keep the <p> tags inside it.

<div id="wrapper" style="border: 2px solid red;">
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</div>

Solution: use the Element.replaceWith() method, passing it the unpacked list of the parent's childNodes using the spread syntax (...).

const wrapper = document.getElementById('wrapper');

if (wrapper) {
  // Replace the wrapper element with all of its own child nodes.
  wrapper.replaceWith(...wrapper.childNodes);
}

After this code runs, the red-bordered div will be gone, but the two <p> tags will remain directly in the <body>.

Task 3: Find and Remove a Specific Ancestor Element​

In complex DOM structures, the element you want to remove might not be the direct parent. It could be a grandparent or an even more distant ancestor. Instead of chaining parentElement multiple times (child.parentElement.parentElement), the modern and robust solution is to use Element.closest().

Problem: you have a button deep inside a "card" component, and you want to remove the entire card, which is identified by the class .card.

<article class="card">
  <h2>Card Title</h2>
  <div>
    <span>
      <button class="delete-btn">Delete Card</button>
    </span>
  </div>
</article>

Solution: the closest() method travels up the DOM tree from the current element and returns the first ancestor that matches a specified CSS selector.

const deleteButton = document.querySelector('.delete-btn');

deleteButton.addEventListener('click', function() {
  // Find the closest ancestor element with the class 'card'.
  const card = this.closest('.card');
  
  // If a matching ancestor is found, remove it.
  card?.remove();
});

This method is extremely powerful because it is decoupled from the specific DOM structure. You can add or remove wrapper divs inside the card, and this code will still work perfectly as long as the .card class exists on the top-level element.

Conclusion​

Removing parent elements in JavaScript is a simple task with modern DOM APIs, but it's important to choose the right tool for your specific goal.

  • To remove a direct parent and all its children, use childElement.parentElement.remove().
  • To remove a parent but keep its children, use parentElement.replaceWith(...parentElement.childNodes).
  • To find and remove a specific ancestor, the recommended best practice is to use childElement.closest('.selector').remove().

Table of Contents