• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using JavaScript to Hide Element by Class

Using JavaScript to Hide Element by Class

April 10, 2022 Leave a Comment

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:

This is a class that we do NOT want to hide with jQuery

This is a class that we WANT to hide with jQuery

This is a class that we WANT to hide with jQuery

This is a class that we do NOT want to hide with jQuery

This is a class that we WANT to hide with jQuery

This is a class that we do NOT want to hide with jQuery

This is a class that we WANT to hide with jQuery

This is a class that we do NOT want to hide with jQuery

This is a class that we do NOT want to hide with jQuery

Hide classes

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.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Set the Cursor Position
  • 2.  Using JavaScript to Round to 4 Decimal Places
  • 3.  Convert an Array to Set in JavaScript
  • 4.  Check if a String Contains Uppercase Letters in JavaScript
  • 5.  Reverse Words in a String JavaScript
  • 6.  Using the appendChild Method with JavaScript to Add Items to a List
  • 7.  Using JavaScript to Wait 5 Seconds Before Executing Code
  • 8.  JavaScript atan – Find Arctangent and Inverse Tangent of Number
  • 9.  Using JavaScript to Rotate an Image
  • 10.  JavaScript Check if Attribute Exists in HTML Element

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy