JavaScript Remove DOM Element: remove() and removeChild()

Removing a DOM element in JavaScript means deleting a node from the current document. The modern method is element.remove(). The older but still useful method is parentNode.removeChild(element), especially when you need compatibility with older code or want the removed node returned.

Most DOM removal code has two steps: select the element, then remove it. Always check that the element exists before calling a removal method.

Tested On: Removal helper examples were tested with Node.js v20.18.1 on a Linux system. Actual DOM selection and page updates must be tested in a browser or DOM test environment because Node.js does not provide a browser DOM by default.

Method 1: Remove an Element with remove()

Use remove() when you already have the element reference.

html

<p id="notice">This message can be removed.</p>

<script>
  const notice = document.querySelector("#notice");

  if (notice) {
    notice.remove();
  }
</script>

A helper test used for this article:

javascript

function removeNode(node) {
  if (typeof node.remove === "function") {
    node.remove();
    return "remove";
  }

  node.parentNode.removeChild(node);
  return "removeChild";
}

const node = {
  removed: false,
  remove() {
    this.removed = true;
  },
};

console.log("dom-remove:", removeNode(node), node.removed);

Tested output:

text

dom-remove: remove true

In a browser, notice.remove() removes the paragraph from the DOM.

Method 2: Remove an Element with removeChild()

removeChild() is called on the parent node and receives the child node to remove.

javascript

const item = document.querySelector(".old-item");

if (item && item.parentNode) {
  item.parentNode.removeChild(item);
}

Tested helper output for the fallback branch:

text

dom-remove-child: removeChild legacy

Use this pattern when working with older examples or when you need the removed node returned from removeChild().

Method 3: Remove an Element After a Click

A common pattern is to remove an element from an event handler.

html

<button class="delete">Delete message</button>
<p class="message">Temporary message</p>

<script>
  document.querySelector(".delete").addEventListener("click", () => {
    document.querySelector(".message")?.remove();
  });
</script>

The optional chaining operator ?. prevents an error if .message is already gone.

Method 4: Remove Multiple DOM Elements

Use querySelectorAll() when you need to remove every matching element.

javascript

document.querySelectorAll(".toast").forEach((toast) => {
  toast.remove();
});

This is useful for clearing notifications, old search results, or temporary UI elements.

Method 5: Empty an Element Without Removing the Parent

If you want to keep the parent element but remove all its children, replace its content.

javascript

const list = document.querySelector("#results");

if (list) {
  list.replaceChildren();
}

This keeps #results in the DOM and removes only its child nodes.

Common Questions About Removing DOM Elements

What is the easiest way to remove an element from the DOM?

Select the element and call element.remove(). Example: document.querySelector(".item")?.remove().

What is the difference between remove and removeChild?

remove() is called on the element itself. removeChild() is called on the parent and receives the child element to remove.

How do I remove all elements with a class?

Use document.querySelectorAll(".class-name").forEach((el) => el.remove()).

Summary

To remove a DOM element in JavaScript, select the node and call remove(). Use removeChild() when working through a parent node or maintaining older code. For multiple elements, combine querySelectorAll() with forEach(), and use null checks or optional chaining so the code does not fail when the target element is missing.