References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript remove() method

Method JavaScript All modern browsers Updated
Quick answer

The remove() method deletes an element from the DOM. el.remove() takes the element off the page in one call — far simpler than the old parent.removeChild(el). The element still exists in memory afterward, so you can re-insert it if you kept a reference.

Overview

remove() takes an element out of the document. You call it directly on the element you want gone — el.remove() — and it's detached from its parent and disappears from the page. That's the whole API, which is the point: it replaced the clunky old pattern of el.parentNode.removeChild(el), where you had to reach for the parent first.

The element isn't destroyed, just detached. As long as you hold a reference to it (in a variable), it continues to exist in memory and you can re-insert it later with appendChild() or append(). If you don't keep a reference, it becomes eligible for garbage collection. Any event listeners attached to it stop firing once it's off the page (and are cleaned up with the element if nothing else references it).

A common pattern is removing an item in response to a click, often combined with closest() to find the right element to delete: e.target.closest(".item").remove(). To clear all children of a container instead, setting innerHTML to "" is the quick way, though removing nodes individually is gentler on listeners.

Syntax

element.remove()

document.querySelector(".alert").remove();
e.target.closest(".item").remove();

Example

Live example 
<ul id="list" style="font:15px system-ui">
  <li>Click me to remove <button>x</button></li>
  <li>Or me <button>x</button></li>
</ul>
<script>
  document.getElementById('list').addEventListener('click', (e) => {
    if (e.target.matches('button')) {
      e.target.closest('li').remove();
    }
  });
</script>

Best practices

  • Use el.remove() — it's simpler than the old parent.removeChild(el).
  • Keep a reference if you might re-insert the element later with appendChild().
  • Combine it with closest() to remove the right ancestor on a click.
  • To empty a container, set innerHTML to "", or remove children one by one.

Frequently asked questions

How do I remove an element from the DOM?
Call element.remove(). It detaches the element from the page in one step.
What is the difference between remove() and removeChild()?
remove() is called on the element itself; removeChild() is the older method called on the parent. remove() is simpler.
Does remove() destroy the element?
No — it detaches it. If you keep a reference, you can re-insert it later; otherwise it's garbage-collected.
How do I remove all child elements?
Set innerHTML to "", or loop and remove each child.
querySelectorAll() requestAnimationFrame()