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:
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
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.
Leave a Reply