JavaScript removeChild() Method

What Is the JavaScript removeChild() Method?

The JavaScript removeChild() method removes a specified child node from its parent node in the DOM. You call this method on the parent element and pass the direct child node you want to remove. It works with element nodes and other node types, such as text nodes.

The method returns the removed node, so you can store it and insert it into the document again if needed.

Syntax

parentNode.removeChild(childNode);

• parentNode: The parent node that currently contains the child.
• childNode: The direct child node to remove.

Return value: The method returns the removed child node.

Basic Example of removeChild()

In this example, clicking the button removes the paragraph from its parent container.

<div id="container">
  <p id="message">This paragraph will be removed.</p>
</div>

<button id="removeBtn">Remove Paragraph</button>

<script>
  const container = document.getElementById("container");
  const message = document.getElementById("message");

  document.getElementById("removeBtn").addEventListener("click", () => {
    container.removeChild(message);
  });
</script>

When the button is clicked, container.removeChild(message) removes the paragraph because it is a direct child of the container.

Remove an HTML Element Using Its Parent

To remove an element, first select both the parent and the child. Then call removeChild() on the parent.

<ul id="languages">
  <li id="html">HTML</li>
  <li id="css">CSS</li>
  <li id="javascript">JavaScript</li>
</ul>

<script>
  const list = document.getElementById("languages");
  const item = document.getElementById("css");

  const removedItem = list.removeChild(item);

  console.log(removedItem.textContent); // CSS
</script>

The CSS list item is removed, and the returned node is stored in removedItem.

Remove the Last Child Element

You can use the lastElementChild property to remove the last element child from a parent.

<ul id="fruitList">
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<script>
  const fruitList = document.getElementById("fruitList");
  const lastItem = fruitList.lastElementChild;

  if (lastItem) {
    fruitList.removeChild(lastItem);
  }
</script>

The if condition prevents an attempt to remove a child when the list is empty.

Remove the First Child Node

The firstChild property returns the first child node. Remember that it can refer to a text node containing whitespace, not necessarily an HTML element.

<div id="content">
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>

<script>
  const content = document.getElementById("content");
  const firstElement = content.firstElementChild;

  if (firstElement) {
    content.removeChild(firstElement);
  }
</script>

Using firstElementChild targets the first element and avoids selecting a whitespace text node.

Remove a Child Node and Add It Back

Because removeChild() returns the removed node, you can keep a reference and append it to the same parent or another parent later.

<div id="box">
  <p id="note">This paragraph can be moved.</p>
</div>

<button id="remove">Remove</button>
<button id="restore">Restore</button>

<script>
  const box = document.getElementById("box");
  const note = document.getElementById("note");
  let savedNode = null;

  document.getElementById("remove").addEventListener("click", () => {
    if (note.parentNode === box) {
      savedNode = box.removeChild(note);
    }
  });

  document.getElementById("restore").addEventListener("click", () => {
    if (savedNode && !savedNode.parentNode) {
      box.appendChild(savedNode);
    }
  });
</script>

The removed paragraph remains available through the savedNode variable and can be reinserted with appendChild().

Remove Multiple Child Elements

To remove all child nodes, repeatedly remove the first child until the parent has no children. This approach also removes text nodes and comments.

<div id="items">
  <p>First item</p>
  <p>Second item</p>
  <p>Third item</p>
</div>

<script>
  const items = document.getElementById("items");

  while (items.firstChild) {
    items.removeChild(items.firstChild);
  }
</script>

If you only want to remove element children, you can use replaceChildren() with no arguments:

items.replaceChildren();

Check Whether the Node Is a Child Before Removing It

The specified node must be a direct child of the parent on which you call removeChild(). Otherwise, the browser throws a NotFoundError DOM exception.

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

if (parent && child && child.parentNode === parent) {
  parent.removeChild(child);
}

This check confirms that both references exist and that the child belongs directly to the selected parent.

removeChild() vs remove()

Both methods can remove an element from the DOM, but they are called differently.

For example, these statements remove the same element when child is a child of parent:

parent.removeChild(child);

// Modern alternative
child.remove();

Common Errors When Using removeChild()

• NotFoundError: The node passed as the argument is not a direct child of the parent.
• Null reference: A selector did not find the expected parent or child, so the code received null.
• Wrong node selected: firstChild or lastChild may select a text node. Use firstElementChild or lastElementChild when you need an element.
• Removing an already detached node: Once a node has been removed, its former parent cannot remove it again. Check its current parentNode first.

Browser Support

The removeChild() method is a long-established DOM API and is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. It is available on the DOM Node interface.