Failed to execute 'removeChild' on 'Node' error in JS

# Table of Contents

# Failed to execute 'removeChild' on 'Node' error in JS

The JavaScript Uncaught DOMException: Failed to execute 'removeChild' on 'Node' occurs when the element you pass to the removeChild() method is not a direct child of the node on which you called the method.

To solve the error, make sure to pass a direct child to the removeChild() method.

failed to execute removechild on-node

Here is the complete error message.

shell

Copied!
Uncaught DOMException: Failed to execute 'removeChild' on 'Node':
The node to be removed is not a child of this node.

NOTE: If you got the error in React.js, click on the following subheading:

Failed to execute 'removeChild' on 'Node' error in React.js

Here is an example of how the error occurs.

This is my index.html file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      Parent
      <div id="child">
        Child
        <div id="nested-child">Nested Child</div>
      </div>
    </div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const parent = document.getElementById('parent');

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

// ⛔️ Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
// ⛔️ Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
parent.removeChild(nestedChild);

The code for this article is available on GitHub

We called the removeChild() method with the nested child element and not with the direct child which caused the error.

The method cannot be called with a descendant, it has to be called with a direct child of the element.

# Passing a direct child of the element to `removeChild()`

One way to solve the error is to pass a direct child of the element to the removeChild() method.

index.js

Copied!
const parent = document.getElementById('parent');

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

parent.removeChild(child);

If I open the page in my browser, I can see that the child element has been removed.

child element removed

# Removing the wrapper element

An alternative approach to solving the error is to remove the wrapper element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      Parent
      <div id="nested-child">Nested Child</div>
    </div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Notice that I removed the child element, so the nested-child element is not a direct child of the parent element.

index.js

Copied!
const parent = document.getElementById('parent');

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

parent.removeChild(nestedChild);

The code for this article is available on GitHub

Now, calling the removeChild method with the element that has an id of nested-child works.

child element removed

I have also written 2 relevant articles:

# Failed to execute 'removeChild' on 'Node' error in React.js

If you got the error in a React.js application, replace the React fragment with a div element.

Replace the following.

App.js

Copied!
// Replace this
<React.Fragment>Example</React.Fragment>

// or this

<>Example</>

With the following.

App.js

Copied!
<div>Example</div>

The code for this article is available on GitHub

The error often occurs in a React.js application when using third-party libraries that use the removeChild() method under the hood.

React fragments are used when you need to group a list of children without adding extra nodes to the DOM.

However, in some cases, an extra node element is needed and serves as a parent element enabling these third-party libraries to use the removeChild method.

# Using the `remove()` method instead of `removeChild()`

If the error persists, you might want to use the remove() method to remove the given element.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      Parent
      <div id="child">
        Child
        <div id="nested-child">Nested Child</div>
      </div>
    </div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

nestedChild.remove();

If I load the page in my browser, I can see that the element has been removed.

remove nested child

I have written a detailed guide on how to remove a DOM element by ID.

The remove() method removes the DOM element on which it is called.

If you need to remove the parent element of a Node, check out the following article.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Failed to execute 'removeChild' on 'Node' error in JS

# Table of Contents