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.
TheremoveChild() method of theNode interfaceremoves 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 ofremoveChild() is not stored, and no other reference is kept,it will beautomatically deleted from memory after a short time.
UnlikeNode.cloneNode() the return value preserves theEventListener objects associated with it.
Syntax
removeChild(child)Parameters
Return value
The removedchild node.
Exceptions
NotFoundErrorDOMExceptionThrown if the
childis not a child of the node.TypeErrorThrown if the
childisnull.
Examples
Simple examples
Given this HTML:
<div> <div></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></div>const parent = document.getElementById("parent");const child = document.getElementById("child");// Throws Uncaught TypeErrorconst garbage = parent.removeChild(child);Causing a NotFoundError
<!--Sample HTML code--><div> <div></div></div>const parent = document.getElementById("parent");const child = document.getElementById("child");// This first call correctly removes the nodeconst garbage = parent.removeChild(child);// Second call throws NotFoundErrorparent.removeChild(child);Specifications
| Specification |
|---|
| DOM # dom-node-removechild |