Skip to main content

How to Remove a DOM Element by ID in JavaScript

Removing an element from the Document Object Model (DOM) is a fundamental part of creating dynamic web pages. You might need to delete an item from a list, close a modal window, or remove a notification. The modern and most direct way to do this is with the Element.remove() method.

This guide will teach you how to select an element by its ID and remove it from the DOM. You will also learn the robust way to handle cases where the element might not exist and how to trigger the removal from a user event like a click.

The Element.remove() method is the modern, simple, and standard way to remove an element from the DOM. It is called directly on the element you wish to remove.

The logic:

  1. Select the element you want to remove, typically with document.getElementById().
  2. Call the .remove() method on that element.

Problem: you have an element in your HTML that you need to remove using JavaScript.

<div id="box-to-remove">This is a box.</div>
<p>Some other content.</p>

Solution:

// 1. Select the element by its ID.
const elementToRemove = document.getElementById('box-to-remove');

// 2. Call the .remove() method on the element.
elementToRemove.remove();
note

After this code runs, the div with the ID box-to-remove will be completely removed from the DOM.

The Classic Method: parentNode.removeChild()​

Before the .remove() method was widely supported, the standard way to remove an element was more verbose. It involved getting a reference to the element's parent and then telling the parent to remove one of its children.

const elementToRemove = document.getElementById('box-to-remove');

// Check if the element and its parent exist
if (elementToRemove && elementToRemove.parentNode) {
  // Tell the parent to remove its child
  elementToRemove.parentNode.removeChild(elementToRemove);
}
note

While this still works in all browsers, the modern .remove() method is overwhelmingly recommended for its simplicity and readability.

A Common Pitfall: Handling Non-Existent Elements​

A common source of errors is trying to call .remove() on an element that doesn't exist. If document.getElementById() cannot find an element with the given ID, it returns null.

Example of problem:

// Problem: 'non-existent-box' does not exist in the DOM.
const myElement = document.getElementById('non-existent-box');

// ⛔️ TypeError: Cannot read properties of null (reading 'remove')
myElement.remove();

The solution is to use Optional Chaining (?.).

  • The optional chaining operator (?.) is a modern and clean way to safely call a method on an object that might be null or undefined. If the object is null, the expression short-circuits and returns undefined instead of throwing an error.
// ✅ Safe: If the element is null, .remove() is not called.
document.getElementById('non-existent-box')?.remove();
note

This is the recommended best practice for safely removing an element that may or may not be present in the DOM.

Practical Examples​

How to Remove an Element on Page Load​

This script removes a promotional banner from the page as soon as the script runs.

// This is a robust, one-line solution.
document.getElementById('promo-banner')?.remove();

How to Remove an Element on Click​

A very common use case is to remove an element when it is clicked, such as a "Dismiss" button on a notification.

HTML:

<div id="notification">
  You have a new message!
  <button id="dismiss-btn">Dismiss</button>
</div>

JavaScript:

const dismissButton = document.getElementById('dismiss-btn');
const notification = document.getElementById('notification');

dismissButton.addEventListener('click', () => {
  // When the button is clicked, remove the entire notification element.
  notification.remove();
});

You can also use the event.target property to make an element remove itself when clicked.

const box = document.getElementById('clickable-box');

box.addEventListener('click', (event) => {
  // event.target refers to the element that was clicked.
  event.target.remove();
});

Conclusion​

Removing a DOM element is a straightforward task with modern JavaScript.

  • The element.remove() method is the recommended best practice. It is simple, readable, and directly expresses your intent.
  • To avoid errors when an element might not exist, use optional chaining: document.getElementById('my-id')?.remove().
  • Avoid the older, more verbose parentNode.removeChild() method unless you need to support very old browsers.

Table of Contents