Skip to content

Removing Elements

Removing Elements

Introduction

Remove DOM elements cleanly using modern methods.

Removing an Element

const element = document.querySelector('.to-remove');

// Modern method (preferred)
element.remove();

// Legacy method
element.parentNode.removeChild(element);

Removing Children

const parent = document.querySelector('.container');

// Remove all children
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

// Modern: replace content (clears children)
parent.replaceChildren();

// Or simply: innerHTML = '' (fast but unsafe with listeners)
parent.innerHTML = '';

Summary

element.remove() — modern, clean removal
element.parentNode.removeChild(element) — legacy method
parent.replaceChildren() — removes all children
Always clean up event listeners when removing elements

Further Reading

MDN: ChildNode.remove