JavaScript Element remove() Method

What You’ll Learn

Element.remove() is an instance method that removes the element from its parent in the DOM. Learn the MDN basic example, dismiss-on-click patterns, clearing children, how it compares to removeChild(), and five try-it labs aligned with MDN.

Introduction

Every element in the DOM sits inside a parent (except the document root). To delete a specific element, you can call element.remove() on that element itself. MDN: it removes the element from its parent node.

If the element has no parent (for example, a node you created with createElement but never inserted), calling remove() does nothing—it does not throw an error.

This page is part of JavaScript Element. Related topics include removeChild() and append().

Understanding the remove() Method

Calling el.remove() detaches el from its parent’s child list. The node may still exist in memory if you hold a JavaScript reference to it.

• It is an instance method on Element (ChildNode mixin).
• Takes no parameters (MDN).
• Returns undefined.
• If there is no parent node, the call is a no-op (MDN).
• Modern alternative to parent.removeChild(child).
• MDN: remove is unscopable—unavailable inside a with statement.

📝 Syntax

General form of Element.remove (MDN):

remove()

Parameters

Return value

Common patterns

// MDN example
const element = document.getElementById("div-02");
element.remove();

// Dismiss on click
closeBtn.addEventListener("click", () => {
  toast.remove();
});

// Clear all children (each child removes itself)
[...list.children].forEach((item) => item.remove());

Examples Gallery

Examples follow MDN Element.remove() patterns. Use View Output or Try It Yourself for each case.

const element = document.getElementById("div-02");
element.remove(); // Removes the div with id "div-02"

console.log(document.getElementById("div-02")); // null

null

const toast = document.getElementById("toast");
const closeBtn = document.getElementById("close");

closeBtn.addEventListener("click", () => {
  toast.remove();
  console.log("toast removed");
});

toast removed

const list = document.getElementById("list");

[...list.children].forEach((item) => item.remove());

console.log(list.children.length); // 0

0

function safeRemove(el) {
  if (el.parentNode) {
    el.remove();
    return true;
  }
  return false;
}

const card = document.getElementById("card");
console.log(safeRemove(card)); // true
console.log(safeRemove(card)); // false (already detached)

true
false

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

// Modern — on the child
child.remove();

// Classic — on the parent (returns the removed node)
// parent.removeChild(child);

child removed from parent

🚀 Common Use Cases

• Closing toasts, alerts, and modal overlays on button click.
• Removing list items or table rows after user action.
• Clearing a container’s children before re-rendering.
• Self-removal in event handlers without finding the parent.
• Replacing parent.removeChild(child) with cleaner syntax.
• Pairing with append() for add/remove UI patterns.

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available since July 2015).
• remove() deletes the element itself—not its children individually.
• Return value is always undefined.
• If there is no parent, the call is a safe no-op (MDN).
• MDN: remove is unscopable (not available inside with).
• Related: removeChild(), append(), children, JavaScript hub.

💡 Best Practices