Remove a DOM element by ID using JavaScript

# Table of Contents

# Remove a DOM element by ID using JavaScript

To remove a DOM element by id:

Select the DOM element using the document.getElementById() method.
Call the remove() on the element, e.g. element.remove().
The remove() method removes the element from the DOM.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div id="box">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const element = document.getElementById('box');

element.remove();

remove dom element by id using javascript

The code for this article is available on GitHub

We used the document.getElementById() to select an element by its id.

The getElementById() method returns an Element whose id matches the provided string.

If there is no element with the specified id in the DOM, the method returns null.

You can use the optional chaining (?.) operator to avoid getting an error if the element doesn't exist.

index.js

Copied!
const element = document.getElementById('box');

element?.remove();

If the element variable stores a null or an undefined value, the optional chaining operator short-circuits instead of calling the remove() method.

The last step is to use the Element.remove() method to remove the element from the DOM.

Note that removing an element also removes its children.

# Remove a DOM element by ID without removing its children

If you need to remove the element without removing its children, use this approach instead.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <!-- 👇️ Only remove this div (not children) -->
    <div id="parent">
      <span>Child 1</span>
      <span>Child 2</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const element = document.getElementById('parent');

element.replaceWith(...element.childNodes);

remove dom element by id without removing its children

The code for this article is available on GitHub

To remove an element without removing its children, we basically replace the element with its children.

The code in the example only removes the div element with id of parent, without removing the span elements located inside of the div.

If you need to handle the scenario where the element doesn't exist, use the optional chaining operator (?.).

index.js

Copied!
const element = document.getElementById('parent');

element?.replaceWith(...element.childNodes);

# Remove an Element from the DOM on Click using JavaScript

To remove an element from the DOM on click:

Select the DOM element.
Add a click event listener to the element.
Call the remove() method on the element in the event handler.

Here is the HTML for the examples.

index.html

Copied!
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div
      id="box"
      style="
        background-color: salmon;
        width: 100px;
        height: 100px;
      "
    >
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('click', function handleClick(event) {
  box.remove();
});

remove element from the dom on click

The code for this article is available on GitHub

We added a click event listener to the DOM element.

Each time the element is clicked, a function is invoked.

In our handler function, we used the Element.remove() method to remove the element from the DOM.

# Removing an element from the DOM on click using `target`

We could have also used the target property on the event object to achieve the same result.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('click', function handleClick(event) {
  event.target.remove();
});

remove element from dom on click using event target

The code for this article is available on GitHub

We used the target property on the event object.

The target property is a reference to the object (element) on which the event was dispatched.

In other words event.target gives us access to the DOM element the user clicked.

You can console.log the target property to see the DOM element which was clicked by the user.

index.js

Copied!
const box = document.getElementById('box');

box.addEventListener('click', function handleClick(event) {
  console.log(event.target);

  event.target.remove();
});

The code for this article is available on GitHub

If you click on the div element and look at your browser's console, you'll see the element being logged.

The target property is very useful when adding events to more generic objects, e.g. the document.

# Remove the clicked element regardless of which one it is

Here is an example that removes the clicked DOM element, regardless of which element it is.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div style="background-color: salmon; width: 100px; height: 100px">
      Box 1
    </div>

    <div
      style="
        background-color: salmon;
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 10px;
      "
    >
      Box 2
    </div>

    <div style="background-color: salmon; width: 100px; height: 100px">
      Box 3
    </div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
document.addEventListener('click', function handleClick(event) {
  console.log(event.target);

  event.target.remove();
});

remove clicked element regardless of which one it is

The code for this article is available on GitHub

This time we added the event to the document object.

Each time an element is clicked, we remove it from the DOM, regardless of which element it was.

I've also written an article on how to hide elements by class in JS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove a DOM element by ID using JavaScript

# Table of Contents