Using jQuery to Hide Element by Class

The easiest way we can use jQuery to hide an element by its class name is to use the jQuery hide() method.

$(".class-name").hide();

We can also use jQuery to hide an element by its class name by using the jQuery css() method.

$(".class-name").css("display", "none");

Let’s say we have the following html:

<div id="div1">
  <p class="do-not-hide">This is a class that we do NOT want to hide with jQuery</p>
  <p class="hide">This is a class that we WANT to hide with jQuery</p>
  <p class="hide">This is a class that we WANT to hide with jQuery</p>
  <p class="do-not-hide">This is a class that we do NOT want to hide with jQuery</p>
</div>

Next, if we want to hide all the divs with classname hide, we can use the jQuery hide() method. Here is the JavaScript code to make that happen.

$(".hide").hide();

We can also do this using the css() method in the following jQuery code:

$(".hide").css("display", "none");

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery(".hide").css("display", "none");

Note that we can also hide classes in just plain JavaScript.

Using jQuery to Hide Elements by their Class Name with a Click

We can use jQuery to hide elements by their class name very easily by combining the hide() method with a click event.

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">Hide classes</div>
</div>

We can utilize both the jQuery click() method and jQuery hide() method to hide elements with class name class-to-hide.

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

$("#click-me").click(function(){
  $(".class-to-hide").hide();
});

The final code and output for this example of using jQuery 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">Hide classes</div>
</div>

<script>

$("#click-me").click(function(){
  $(".class-to-hide").hide();
});

</script>

Hopefully this article has been useful for you to understand how to use jQuery to hide an element by its class name.