JavaScript Node removeChild() Method

Beginner
5 min read
Updated: Oct 2026
5 examples
Live preview
Baseline
JavaScript Node.removeChild method — remove DOM child reuse returned node
Definition

What Is removeChild()?

Node.removeChild(child) removes a child node from the parent and returns that node (MDN). It leaves the DOM tree, but a kept reference can still be reused later.

Baseline · Widely available: not Deprecated, Experimental, or Non-standard (since about July 2015).

Errors: NotFoundError if child is not a child of that parent; TypeError if child is null (MDN).

Remember
parent.removeChild(child)  →  removed child node

kept reference → still in memory, reusable
listeners preserved (unlike cloneNode)

MDN patterns:
  parent.removeChild(child)
  child.parentNode.removeChild(child)
  while (el.firstChild) el.removeChild(el.firstChild)
UsePrefer
Remove from known parentparent.removeChild(child)
Have the child onlychild.remove() (modern) or parentNode pattern
Swap with another nodereplaceChild()
Approach

How to Use removeChild()

Call it on the parent, pass the child, optionally keep the return value to reinsert later.

  1. Get the parent and the child that belongs to it.
  2. Call parent.removeChild(child).
  3. Store the return value if you need to reuse the node.
  4. Or use child.parentNode.removeChild(child) when you only have the child.
PieceRequired?Role
Receiver parentYesCurrent parent of child
childYes (not null)Node to remove
Return value—The same removed node

Pseudocode

Pseudocode
if child is null:
  throw TypeError

if child.parent is not this node:
  throw NotFoundError

detach child from this parent
return child   // still in memory if referenced
Reference

Cheat Sheet

Keep these facts handy when removing nodes from the tree.

TopicDetail
Syntaxparent.removeChild(child)
ReturnsThe removed child
In DOM after?No — unless you reappend it
ListenersPreserved on the returned node
NotFoundErrorNot a child of that parent
TypeErrorchild is null
Clear allwhile (el.firstChild) el.removeChild(el.firstChild)
Status (MDN)Baseline Widely available
Try it

Live Preview

Remove a child, clear all children, use the parentNode pattern, or reappend a kept reference.

Browser demo of Node.removeChild() — detach, clear, or reuse the returned node.

Result
Loading…
Code

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

Example 1 — Basic Remove (MDN)

Remove a child from a known parent and keep the return value.

JavaScript
const parent = document.createElement("div");
const child = document.createElement("div");
child.id = "child";
parent.appendChild(child);

console.log(parent.contains(child)); // true
const removed = parent.removeChild(child);
console.log(parent.contains(child)); // false
console.log(removed.id);             // "child"
Try It Yourself

How It Works

  1. Append first. Child must belong to that parent.
  2. Call removeChild. Detaches from the tree.
  3. Return value is the same node. Keep it if you need it.
  4. contains becomes false. No longer under the parent.

Example 2 — parentNode Pattern (MDN)

Remove a node when you only have a reference to the child.

JavaScript
const node = document.createElement("span");
document.body.appendChild(node);

if (node.parentNode) {
  node.parentNode.removeChild(node);
}

console.log(node.parentNode); // null
Try It Yourself

How It Works

  1. Check parentNode. Avoid calling when already detached.
  2. Remove via the parent. Same API, discovered at runtime.
  3. Afterward parentNode is null. Not in any tree.
  4. Modern alternative. node.remove() when available.

Example 3 — Clear All Children (MDN)

Loop firstChild until the parent is empty.

JavaScript
const element = document.createElement("div");
element.appendChild(document.createTextNode("a"));
element.appendChild(document.createElement("span"));
element.appendChild(document.createTextNode("b"));

while (element.firstChild) {
  element.removeChild(element.firstChild);
}

console.log(element.hasChildNodes()); // false
console.log(element.childNodes.length); // 0
Try It Yourself

How It Works

  1. While there is a first child. Classic clear loop from MDN.
  2. Remove one at a time. Works for text and elements.
  3. Stops when empty. firstChild becomes null.
  4. Also clears whitespace. All node types are removed.

Example 4 — Reuse the Returned Node

Keep the reference and append it somewhere else.

JavaScript
const a = document.createElement("div");
const b = document.createElement("div");
const child = document.createElement("p");
child.textContent = "moved";
a.appendChild(child);

const kept = a.removeChild(child);
b.appendChild(kept);

console.log(a.contains(child)); // false
console.log(b.contains(child)); // true
console.log(child.textContent); // "moved"
Try It Yourself

How It Works

  1. Remove from A. Node leaves that parent.
  2. Keep the return value. Still a live Node object.
  3. Append to B. Same node, new location.
  4. Listeners stay. Unlike cloning, handlers are preserved (MDN).

Example 5 — Guard Common Errors

Avoid TypeError / NotFoundError with simple checks.

JavaScript
function safeRemove(parent, child) {
  if (child == null) {
    return "skip: child is null";
  }
  if (child.parentNode !== parent) {
    return "skip: not a child of this parent";
  }
  parent.removeChild(child);
  return "removed";
}

const parent = document.createElement("div");
const child = document.createElement("span");
parent.appendChild(child);

console.log(safeRemove(parent, null));
console.log(safeRemove(parent, child));
console.log(safeRemove(parent, child));
Try It Yourself

How It Works

  1. Reject null. Prevents TypeError.
  2. Check ownership. Prevents NotFoundError on a second call.
  3. Remove once. First success path.
  4. Second call is a no-op. Child is already detached.

Edge Cases & Pitfalls

Check these before calling removeChild() in loops or UI cleanup.

twice

Do not remove the same child twice

The second call throws NotFoundError — the node is no longer a child (MDN).

null

null throws TypeError

Always pass a real Node. Guard optional references before calling.

memory

References keep nodes alive

If you keep the return value (or another ref), the node stays in memory until you drop it (MDN).

modern

element.remove() may be simpler

When you already have the child and do not need the parent API, prefer remove() in modern code.

Compatibility

Browser Support

Node.removeChild() is Baseline Widely available (MDN, since about July 2015). Classic DOM removal — safe everywhere.

✓ Baseline · Widely available

Node.removeChild()

Supported across Chrome, Firefox, Safari, Edge, Opera, and legacy IE. Returns the removed node; throws on bad arguments.

99% Browser support
Google Chrome removeChild() · full support
Full support
Microsoft Edge removeChild() · Chromium
Full support
Apple Safari removeChild() · full support
Full support
Mozilla Firefox removeChild() · full support
Full support
Opera removeChild() · full support
Full support
Internet Explorer removeChild() · legacy
Legacy support
Node.removeChild() Excellent

Bottom line: Use freely. Guard null / wrong-parent cases, or prefer Element.remove() when you only have the child.

Analysis

Performance Notes

ApproachCostBest for
Remove one childCheapTargeted UI updates
Clear with while/firstChildO(n) childrenEmptying a container
Replace whole contentsOften simplerreplaceChildren() / innerHTML = "" when appropriate

Prefer removing what you need. For wiping a large list, consider replaceChildren() when you do not need each returned node.

Remember

Key Takeaways

  • Role: detach a child from its parent and return that node.
  • Reuse: keep the return value to reappend later (listeners stay).
  • Patterns: known parent, parentNode, or clear-all loop.
  • Errors: null → TypeError; wrong parent / twice → NotFoundError.

One line: parent.removeChild(child) takes a node out of the tree and hands it back for reuse or discard.

Frequently Asked Questions

It removes a child node from the parent and returns that removed node. The node leaves the DOM; if you keep a reference it still exists in memory and can be reused (MDN).
No. MDN marks it Baseline Widely available (since about July 2015). It is not Deprecated, Experimental, or Non-standard.
Yes. Unlike Node.cloneNode(), the returned node preserves its EventListener objects (MDN).
NotFoundError if the node is not a child of that parent. TypeError if the child argument is null.
Use child.parentNode.removeChild(child) after checking that parentNode exists (MDN pattern).
For modern code, element.remove() is often simpler when you already have the child. removeChild remains useful when you work from the parent or need the returned node.

Next: replaceChild()

Learn how node.replaceChild() swaps one child for another.

replaceChild tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Node normalize() Method JavaScript Node replaceChild() Method