Hide Element(s) by Class using JavaScript

# Table of Contents

# Hide an Element by Class Name using JavaScript

To hide an element by a class:

Use the document.getElementsByClassName() to select the elements with the specific class.
Access the collection at an index to get the element you want to hide.
Set the element's style.visibility property to hidden.

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 class="box">Box</div>

    <button id="btn">Hide Box</button>

    <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 btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const box = document.getElementsByClassName('box')[0];
  // 👇️ hides element (still takes up space on the page)
  box.style.visibility = 'hidden';

  // 👇️ removes the element from the DOM
  // box.style.display = 'none';
});

hide element by class

The code for this article is available on GitHub

If you need to hide all elements with a specific class, scroll down to the next subheading.

When the button element is clicked, the div element is hidden.

We used the document.getElementsByClassName() method to get an HTMLCollection of elements, from which we accessed the first element (index 0).

Use a for...of loop to iterate over the collection if you need to hide all elements with a specific class.

index.js

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

btn.addEventListener('click', () => {
  const boxes = document.getElementsByClassName('box');

  for (const box of boxes) {
    // 👇️ hides element
    box.style.visibility = 'hidden';

    // 👇️ removes element from DOM
    // box.style.display = 'none';
  }
});

The code for this article is available on GitHub

This code snippet hides all the elements that have a class of box.

We used the visibility CSS property in the examples, however, you might need the display property depending on your use case.

When an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn). The element still affects the layout on your page as normal.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element doesn't exist.

Here is an example that uses the display property to hide an element by its class name.

index.js

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

btn.addEventListener('click', () => {
  const box = document.getElementsByClassName('box')[0];

  // 👇️ removes element from DOM
  box.style.display = 'none';
});

hide element by class display none

The code for this article is available on GitHub

The difference is that when the element's display property is set to none, it no longer takes space on the page.

If you click on the button element from the example, the div element is removed from the DOM and the button element takes its place.

However, if you set the element's visibility property to hidden, the div element still takes up space on the page but is invisible.

# Hide all elements by Class using JavaScript

To hide all elements by class:

Use the getElementsByClassName method to get a collection of HTML elements.
Iterate over the collection using the for...of loop.
Set the style.display property to none on each element.

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 class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <button id="btn">Click me</button>

    <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 btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  const boxes = document.getElementsByClassName('box');

  for (const box of boxes) {
    // 👇️ Remove element from DOM
    box.style.display = 'none';

    // 👇️ hide element (still takes up space on the page)
    // box.style.visibility = 'hidden';
  }
});

The code for this article is available on GitHub

We used the document.getElementsByClassName() method to get an HTMLCollection of the elements with the specific class.

We used the for...of loop to iterate over the collection and on each iteration, we set the element's display property to none to hide it.

Note that the getElementsByClassName method returns an HTML collection and not an array. If you want to convert the collection to an array, pass it to the Array.from() method.

index.js

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

btn.addEventListener('click', () => {
  // 👇️ Use Array.from to convert to array
  const boxes = Array.from(document.getElementsByClassName('box'));

  boxes.forEach(box => {
    // 👇️ Remove element from DOM
    box.style.display = 'none';

    // 👇️ hide element (still takes up space on the page)
    // box.style.visibility = 'hidden';
  });
});

After converting the HTMLCollection to an array, we can use any of the array-supported methods in JavaScript, e.g. Array.forEach.

To hide each element, we set its display property to none, however, you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn). It still affects the layout of your page as normal.

Here is an example that uses the visibility property to hide all of the elements by class.

index.js

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

btn.addEventListener('click', () => {
  const boxes = Array.from(document.getElementsByClassName('box'));

  boxes.forEach(box => {
    // 👇️ hide element (still takes up space on the page)
    box.style.visibility = 'hidden';
  });
});

The code for this article is available on GitHub

If you click on the button, you'll see that the div elements disappear, however, they still take up space on the page.

This is the difference between setting visibility to hidden and display to none.

This might be your preferred solution if you're looking to avoid shifting the contents on the page, which might be confusing to users.

# 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.

Hide Element(s) by Class using JavaScript

# Table of Contents

# Hide an Element by Class Name using JavaScript

# Hide all elements by Class using JavaScript

# Additional Resources

Borislav Hadzhiev