# How to remove an element from the DOM in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 11, 2020, updated Oct 15, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-remove-dom-element

> A simple guide to learn how to remove an HTML element from the DOM tree by using vanilla JavaScript.

In an earlier article, we looked at how to [create and add a new element](https://attacomsian.com/blog/javascript-create-dom-element) into the DOM using JavaScript. Today, let us look at how to remove elements from the DOM with JavaScript.

There are *two* ways to remove an element from the [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) in JavaScript. You can either [hide the DOM element](https://attacomsian.com/blog/javascript-hide-show-dom-elements) using inline styles or entirely remove it.

To **hide** the element from the DOM in JavaScript, you can use the DOM [style](https://attacomsian.com/blog/javascript-dom-style-property) property:

```javascript
// grab element you want to hide
const elem = document.querySelector('#hint')

// hide element with CSS
elem.style.display = 'none'
```

As you can see above, we just changed the element's display type to `none` with the help of the `style` property. This approach is helpful if you temporarily want to hide the element from the DOM and bring it back at some point based on user interactions.

Alternatively, if you want to **remove** the element from the DOM entirely, you can use the `removeChild()` property:

```javascript
// grab element you want to hide
const elem = document.querySelector('#hint')

// remove element
elem.parentNode.removeChild(elem)
```

The `removeChild()` method deletes the given child node of the specified element. It returns the removed node as a `Node` object or `null` if the node does not exist. It works in all modern and old browsers, including Internet Explorer.

## Remove an element using `remove()` method

The `removeChild()` method works great to remove an element, but you can only call it on the `parentNode` of the element you want to remove.

The modern approach to removing an element is the `remove()` method. Just call this method on the element you want to remove from the DOM, like below:

```javascript
// grab element you want to hide
const elem = document.querySelector('#hint')

// remove an element from DOM (ES6 way)
elem.remove()
```

This method was introduced in ES6 and, at the moment, only works in modern browsers. However, you can use a [polyfill](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove#Polyfill) to make it compatible with Internet Explorer 9 and higher.