Hiding / removing elements in DOM using JavaScript

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

In this article, we'll take a look at how to hide and remove elements in DOM by using JavaScript, and we'll learn a few techniques and explain the differences between them.

For this article, we'll assume a straightforward HTML page:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="app.css" />
    <title>Hide elements in DOM using JavaScript</title>
  </head>

  <body>
    <main id="main">
      <div class="first">
        <p>First <code>div</code> element</p>
      </div>
      <div class="second">
        <p>Second <code>div</code> element</p>
      </div>
    </main>

    <footer>
      <button id="hideFirst">Hide first div</button>
      <button id="showFirst">Show first div</button>
    </footer>

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

We have two <div> elements and two <button> elements that will show and hide the first out of the two <div>s on the page.

The <div>s deliberately have different backgrounds as the example needs to be visual to make a point.

We'll discuss four ways to remove elements using JavaScript from the DOM.

visibility: hidden

One of the most straightforward ways to hide an element would be to use the CSS property visibility and set its value to hidden. Here's the entire JavaScript code that we'd be using:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () => {
  firstDiv.style.visibility = 'hidden';
});

btnShow.addEventListener('click', () => {
  firstDiv.style.visibility = '';
});

If we run this example, we'll notice that the space where the first <div> element was is still taking up screen estate. This is because the element is still part of the DOM tree - it's merely been hidden by a CSS style property, but we haven't effectively removed it from the DOM.

If we'd like to place the element back, all we need to do is to set its visibility property to nothing.

style.display

The next way to hide an element from the DOM is to use the display style property. Just like before this will not remove the element from the DOM tree, but it'll add a CSS style property. However, this time, the element is no longer going to take up space and the second <div> element will move to its place:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () => {
  firstDiv.style.display = 'none';
});

btnShow.addEventListener('click', () => {
  firstDiv.style.display = 'block';
});

Using the hidden attribute

We can also hide elements using the hidden attribute. This property expects a boolean value.

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () => {
  firstDiv.hidden = true;
});

btnShow.addEventListener('click', () => {
  firstDiv.hidden = false;
});

Notice, that again the <div> remains in the DOM tree but it doesn't take up space and the second <div> element moves into its place. If we check the properties of the first <div> element, we'll see that a new style has been added with this value:

div.first {
  display: none;
}

Please note that adding a display CSS property with any other value than none will display the element regardless of whether the HTML attribute hidden is present or not.

.remove()

Hiding - or in this case, actually removing an element from the DOM is possible by calling the .remove() method. This is the first option that we are discussing that will remove the element entirely from the DOM tree:

const firstDiv = document.querySelector('.first');
const btnHide = document.getElementById('hideFirst');
const btnShow = document.getElementById('showFirst');

btnHide.addEventListener('click', () => {
  firstDiv.remove();
});

btnShow.addEventListener('click', () => {
  if (!document.querySelector('.first')) {
    const div = document.createElement('div');
    div.classList.add('first');
    const paragraph = document.createElement('p');
    paragraph.innerHTML = 'First <code>div</code> element';
    div.appendChild(paragraph);
    const main = document.getElementById('main');
    main.insertBefore(div, main.firstChild);
  }
});

Using this method will have some repercussions: since the <div> element is now completely removed from the DOM tree, there's no easy way to put it back. The button to add back the <div> is now a lot more complex - this is due to the fact that the element needs to be constructed from scratch.

Now, we could have done something a lot easier, but this could be a bit more dangerous. In the first part of the code we captured the value of the first <div> element, so we can

btnShow.addEventListener('click', () => {
  if (!document.querySelector('.first')) {
    const main = document.getElementById('main');
    main.insertBefore(firstDiv, main.firstChild);
  }
});

Be careful though, we are using a simple codebase here, in a more complex application we may not be able to reconstruct the element quickly.

Styling an element

Completely removing an element from the DOM means that all event listeners and styles that were dynamically added to the element are completely wiped out as well. We can very easily test this by adding yet another button to our HTML page:

<button id="addSytle">Add style</button>

And add some additional code as well that is going to be responsible for adding a style to the first <div> element dynamically:

const btnAddStyle = document.getElementById('addSytle');
btnAddStyle.addEventListener('click', () => {
  firstDiv.style.color = 'black';
});

Now if we use the first way, where we manually reconstructed the element, of course, the styling will be lost. If we use the second way, the styling is still going to be applied when we add back the element.

Conclusion

In this article, we discussed a few ways to hide and remove elements from the DOM using JavaScript. Use the one that is suitable for your project, but please be wary of some of the drawbacks.