Using JavaScript to Hide Element by Class

In JavaScript to hide an element by its class name, we can do this by using the getElementsByClassName() method along with a for loop.

var selectedClasses = document.getElementsByClassName('class-to-hide');
for (var i = 0; i < selectedClasses.length; i++) {
  selectedClasses[i].style.display = 'none';
}

In the code above, we use the getElementsByClassName() method to return a collection of all the elements with a class name of class-to-hide.

Once we have the collection of classes we want to hide, we then have to loop through each one to target each specific element in the collection. We do this with the for loop above.

Finally, to hide all of the classes in our collection, we must change each of the element’s display property to “none”.

This will end up hiding all of the elements with the targeted class name we want.

Not that this can be done much easier using jQuery.

Using JavaScript to Hide Elements by Class Name with a Click

We can use JavaScript to hide elements by their class name by combining the getElementsByClassName() method along with a for loop.

Let’s say that we have the following html where we want to give the user the ability to hide the divs with classname “class-to-hide”:

<div id="div1">
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <div id="click-me" onclick="hideClasses()">Hide classes</div>
</div>

We will first start by adding an onclick event to our button to launch the function hideClasses(), where we will hide the classes we want.

We will use the code we provided above to hide the class class-to-hide in this example. To repeat, we will use the getElementsByClassName() to get a collection of the elements with class class-to-hide.

We will then use a for loop to loop through each element in the collection.

Finally, to hide all of the classes in our collection, we must change each of the element’s display property to “none”.

Below is the JavaScript code which will allow the user to be able to hide these elements:

function hideClasses(){
  var selectedClasses = document.getElementsByClassName('class-to-hide');
  for (var i = 0; i < selectedClasses.length; i++) {
    selectedClasses[i].style.display = 'none';
  }
};

The final code and output for this example of using JavaScript to hide elements by their class name is below:

Code Output:

Full Code:

<div id="div1">
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p class="class-to-hide">This is a class that we WANT to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <p>This is a class that we do NOT want to hide with jQuery</p>
  <div id="click-me" onclick="hideClasses()">Hide classes</div>
</div>

<script>

function hideClasses(){
  var selectedClasses = document.getElementsByClassName('class-to-hide');
  for (var i = 0; i < selectedClasses.length; i++) {
    selectedClasses[i].style.display = 'none';
  }
};

</script>

Hopefully this article has been useful for you to understand how to use JavaScript to hide element by class.