Node: removeChild() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
removeChild(child)
Parameters
Return value
The removed child node.
Exceptions
NotFoundErrorDOMException-
Thrown if the
childis not a child of the node. TypeError-
Thrown if the
childisnull.
Examples
Simple examples
Given this HTML:
<div id="parent">
<div id="child"></div>
</div>
To remove a specified element when knowing its parent node:
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:
const node = document.getElementById("child");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
To remove all children from an element:
const element = document.getElementById("idOfParent");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
Causing a TypeError
<!--Sample HTML code-->
<div id="parent"></div>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// Throws Uncaught TypeError
const garbage = parent.removeChild(child);
Causing a NotFoundError
<!--Sample HTML code-->
<div id="parent">
<div id="child"></div>
</div>
const parent = document.getElementById("parent");
const child = document.getElementById("child");
// This first call correctly removes the node
const garbage = parent.removeChild(child);
// Second call throws NotFoundError
parent.removeChild(child);
Specifications
| Specification |
|---|
| DOM # dom-node-removechild |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
removeChild
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support