W3cubDocs

/Web APIs

Node: removeChild() method

The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node.

Note: As long as a reference is kept on the removed child, it still exists in memory, but is no longer part of the DOM. It can still be reused later in the code.

If the return value of removeChild() is not stored, and no other reference is kept, it will be automatically deleted from memory after a short time.

Unlike Node.cloneNode() the return value preserves the EventListener objects associated with it.

Syntax

js

removeChild(child)

Parameters

child

A Node that is the child node to be removed from the DOM.

Exception

NotFoundError DOMException

Thrown if the child is not a child of the node.

TypeError

Thrown if the child is null.

Examples

Simple examples

Given this HTML:

html

<div id="parent">
  <div id="child"></div>
</div>

To remove a specified element when knowing its parent node:

js

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);

To remove a specified element without having to specify its parent node:

js

const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

To remove all children from an element:

js

const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Causing a TypeError

html

<!--Sample HTML code-->
<div id="parent"></div>

js

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Throws Uncaught TypeError
const garbage = parent.removeChild(child);

Causing a NotFoundError

html

<!--Sample HTML code-->
<div id="parent">
  <div id="child"></div>
</div>

js

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// This first call correctly removes the node
const garbage = parent.removeChild(child);

// Throws NotFoundError
garbage = parent.removeChild(child);

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
removeChild 1 12 1 5 7 1.1 4.4 18 4 10.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild