Skip to main content

How to Hide an Element by its Class Name in JavaScript

Hiding elements is a fundamental part of creating a dynamic and interactive user interface. A common requirement is to hide one or more elements that share a specific CSS class. The modern and most effective way to do this is by selecting the elements and then modifying their CSS display or visibility properties.

This guide will teach you how to use querySelector and querySelectorAll to hide elements by class. You will also learn the critical difference between hiding an element with display: 'none' versus visibility: 'hidden'.

The Core Task: Selecting and Hiding by Class​

The process is a two-step operation:

  1. Select: Use a DOM query method to get a reference to the element(s) you want to hide, using their class name as a selector.
  2. Hide: Change the appropriate CSS property on the selected element(s) to make them disappear.

Consider this HTML for example:

<div class="panel">Panel 1</div>
<div class="panel active">Panel 2</div>
<div class="panel">Panel 3</div>

How to Hide a Single Element by Class​

If you only need to hide the first element that matches a class, you should use document.querySelector().

For example, you want to hide the first element with the class .panel.

Solution:

// Select the first element with the class "panel".
// The dot (.) is crucial for a class selector.
const firstPanel = document.querySelector('.panel');

if (firstPanel) {
  // Set its display property to 'none' to hide it
  firstPanel.style.display = 'none';
}
note

This will hide "Panel 1" and the other elements will shift up to fill its space.

How to Hide All Elements with a Class​

To hide all elements that share a class, you must use document.querySelectorAll(). This method returns a NodeList containing all matching elements, which you can then iterate over.

For example, you want to hide every element with the class .panel.

Solution:

// Select ALL elements with the class "panel".
const allPanels = document.querySelectorAll('.panel');

// Use .forEach() to loop through the NodeList.
allPanels.forEach(panel => {
  panel.style.display = 'none';
});
note

This is the recommended best practice for operating on multiple elements, as querySelectorAll is powerful, flexible, and returns a collection with a convenient forEach method.

display: none vs. visibility: 'hidden': A Critical Comparison​

Choosing the right CSS property to hide an element is crucial for the user experience.

Propertydisplay: 'none' (Recommended for Hiding)visibility: 'hidden'
Effect on LayoutRemoves the element from the document flow. The space it occupied collapses.Preserves the element's space. The element is invisible but still affects the layout, leaving a "blank spot."
Common Use CaseCompletely removing an element from view (e.g., hiding a closed modal, removing items from a list).Making an element temporarily invisible without shifting the page layout (e.g., in animations or UI state changes).
note

Best Practice: Use display: 'none' for most hiding tasks unless you have a specific reason to preserve the element's original space in the layout.

Practical Example: A "Hide All Panels" Button​

This script demonstrates a common UI pattern where a button hides all elements with a specific class.

Consider this HTML code:

<button id="hide-btn">Hide All Panels</button>
<div class="panel">Panel 1</div>
<div class="panel">Panel 2</div>
<div class="panel">Panel 3</div>

And this is our JavaScript code:

const hideButton = document.getElementById('hide-btn');

hideButton.addEventListener('click', () => {
  console.log('Hiding all panels...');
  
  const allPanels = document.querySelectorAll('.panel');
  
  allPanels.forEach(panel => {
    panel.style.display = 'none';
  });
});

Conclusion​

Hiding elements by class in JavaScript is a simple and powerful technique for creating dynamic user interfaces.

  • To select elements, the document.querySelectorAll('.my-class') method is the recommended best practice. It is versatile and returns a NodeList that is easy to iterate over.
  • To hide the selected elements, setting element.style.display = 'none' is the most common and effective method, as it completely removes the element from the document layout.
  • Use element.style.visibility = 'hidden' only when you need to make an element invisible while preserving its space on the page.

Table of Contents