Skip to main content

How to Resolve "DOMException: Failed to execute 'removeChild' on 'Node'" Error in JavaScript

The DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node is a common error that occurs when you try to remove an element from the DOM using the removeChild() method, but you are calling it on the wrong parent.

This guide will explain what this error means, why it happens, and show you the correct way to use removeChild(). More importantly, it will introduce the modern and far simpler .remove() method, which is the recommended best practice for removing elements.

Core Problem: removeChild() Must be Called on the Direct Parent​

The Node.removeChild() method is designed to remove a direct child from a parent element. The error occurs when you try to remove an element that is not an immediate child of the node you are calling the method on. In other words, you cannot remove a grandchild, a great-grandchild, or an element from a completely different part of the DOM.

How the Error Occurs​

Let's look at a typical nested structure.

For example: HTML:

<div id="parent">
  <div id="child">
    <div id="nested-child">I am the nested child</div>
  </div>
</div>

JavaScript:

const parent = document.getElementById('parent');
const nestedChild = document.getElementById('nested-child');

// ⛔️ DOMException: The node to be removed is not a child of this node.
parent.removeChild(nestedChild);
note

This fails because nested-child is a child of child, not a direct child of parent. You are telling the "grandparent" to remove its "grandchild," which it cannot do directly.

The Classic Solution: Calling removeChild() on the Correct Parent​

To fix the error using removeChild(), you must first get a reference to the direct parent of the element you want to remove and then call removeChild() on that parent.

const nestedChild = document.getElementById('nested-child');
const directParent = nestedChild.parentNode; // This gets the `#child` div

console.log(directParent.id); // Output: "child"

// Now, call removeChild() on the correct parent.
directParent.removeChild(nestedChild);
note

This approach works perfectly but is verbose, as it requires you to find both the element and its parent.

Modern JavaScript provides a much simpler and more direct method: Element.remove(). This method is called directly on the element you want to remove and does not require you to get a reference to its parent.

This single, readable line is all you need.

const nestedChild = document.getElementById('nested-child');

// This works regardless of how deeply the element is nested.
nestedChild.remove();

This is the recommended best practice for removing an element from the DOM because:

  • It is more concise and readable.
  • It is less error-prone, as you don't need to manually find the parent node.
  • It is supported in all modern browsers (and has been for years).

A Note on React​

This error can also appear in React applications, especially when using third-party libraries that manipulate the DOM directly. A common cause is rendering a component that returns multiple elements without a single parent wrapper, often by using a React.Fragment (or the <>...</> syntax).

The Problem in React:

// This might cause an error with a library that expects a single container
// because the fragment doesn't render a real DOM element.
return (
  <>
    <p>Some text</p>
    <AnotherComponent />
  </>
);

The Solution:

  • If you encounter this error in React, the simplest fix is often to wrap your component's return value in a single <div> or another valid DOM element.
  • This provides the single parent node that the underlying DOM manipulation library is expecting.

Conclusion​

The "removeChild: The node to be removed is not a child of this node" error is a clear sign that you are calling the removeChild() method on the wrong element.

  • The classic solution is to find the element's parentNode and call removeChild() on it.
  • The recommended modern best practice is to avoid removeChild() entirely and use the much simpler and more direct element.remove() method.

By using element.remove(), you can write cleaner, more readable, and less error-prone code for removing elements from the DOM.

Table of Contents