jQuery Remove Class

jQuery always works together with JavaScript. There are some best functions inside jQuery that are used the most. The jQuery remove class is also a function that removes single or multiple classes from any HTML element.

Read Also: 7 easiest example of while loop javascript

There are some great functions inside jQuery through which you can play with CSS. Below are some examples available to explain to you better, from which you will know how the jQuery removes class function works.

jQuery Remove Class

The removeClass () function is used to remove the CSS class from the element. Let’s know how to remove class in jQuery.

Read Also: 10 awesome examples of javascript else if condition

In the example shown below, we have a div that has a class called “redbackground”, and has a background-color applied to this class.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>
  
<style>
	.redbackground{
		background-color: red;
	}
</style>


/ ****** Inside body tag ******** /

<div class="redbackground">
	<p>Remove my background color</p>
</div>

<a href="javascript:void(0)">Click To Remove Class</a>

<script>
	jQuery("a").click(function(){
		jQuery("div").removeClass("redbackground");
	});
</script>

jQuery Remove Multiple Classes

If you want to remove multiple classes from your element, you have to set all your classes inside the removeClass function that you want to remove. Let’s know how jquery remove multiple classes from the element.

Read Also: 12 easiest examples of javascript onclick

We have 2 div and both have different classes, so know how you can remove multiple classes through the same jQuery function.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>  

<style>
	.redbackground{
		background-color: red;
	}
	.pinkbackground{
		background-color: pink;
	}
</style>


/ ****** Inside body tag ******** /

<div class="redbackground">
	<p>Remove my background color</p>
</div>

<div class="pinkbackground">
	<p>Remove my background color</p>
</div>

<a href="javascript:void(0)">Click To Remove Class</a>

<script>
	jQuery("a").click(function(){
		jQuery("div").removeClass("redbackground pinkbackground");
	});
</script>

Add And Remove Class jQuery

If you want to remove the old class from your element and replace it with the new class, then for that you have to use both removeClass and addClass functions.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>

<style>
	.old{
		background-color: red;
	}
	.new{
		background-color: pink;
	}
</style>


/ ****** Inside body tag ******** /

<div class="old">
	<p>Remove my background color</p>
</div>

<a href="javascript:void(0)">Click To Remove Class</a>

<script>
	jQuery("a").click(function(){
		jQuery("div").removeClass("old");
		jQuery("div").addClass("new");
	});
</script>

jQuery Add Class

If you want to put a new class on your element, then you have to use the addClass function. Let’s know how to use jQuery add class methods.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>

<style>
	.new{
		background-color: pink;
		font-size: 40px;
	}
</style>


/ ****** Inside body tag ******** /

<p>Remove my background color</p>

<a href="javascript:void(0)">Click To Remove Class</a>

<script>
	jQuery("a").click(function(){
		jQuery("p").addClass("new");
	});
</script>

If you want to put a new class on an element where there is already a class, then for that you have to mention the previous class with which you want to put a new class.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>

<style>
	.old{
		background-color: red;
		font-size: 20px;
	}
	.new{
		background-color: pink;
		font-size: 40px;
	}
</style>


/ ****** Inside body tag ******** /

<p class="old">Remove my background red to pink</p>

<a href="javascript:void(0)">Click To Remove Class</a>

<script>
	jQuery("a").click(function(){
		jQuery("p.old").addClass("new");
	});
</script>

jQuery Onclick Remove Class And Addclass

If you want to add and remove the class using onclick, then see the example given below.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>
  
<style>
	.old{
		background-color: red;
		font-size: 20px;
	}
	.new{
		background-color: yellow;
		font-size: 40px;
		color: #000;
	}
</style>


/ ****** Inside body tag ******** /

<div class="old" id="myID">
	Please remove background color.
</div>

<a href="javascript:void(0)" onclick="myfunction();" >Click here</a>

<script>
	function myfunction() {
 
    jQuery("#myID").removeClass("old");
	jQuery("#myID").addClass("new");
   
};
</script>

jQuery On Scroll Add Class

If you want to add a class on On Scroll, then you have to use the scrollTop function. Such programs are often used to make sticky headers.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>    
  
<style>
	.satikyHeader{
		background-color: yellow;
		font-size: 40px;
		color: #000;
		padding: 30px;
	}
</style>


/ ****** Inside body tag ******** /

<header id="header">
	This is a menu bar area.
</header>

<script>
$(window).scroll(function() {    
    var scrollup = $(window).scrollTop();
   
    if (scrollup >= 10) {
       
        $("#header").addClass("satikyHeader");
    }else{
		$("#header").removeClass("satikyHeader");
	}
}); 
</script>

jQuery toggleClass() Method

Two or more functions works inside the toggle, such as Once clicked, one function will play, the second click will play another function.

/ ****** Inside head tag ******** /

<script src="my-folder/jquery.min.js"></script>  
    
<style>
	.myclass{
		background-color: yellow;
		color: #000;
		font-size: 35px;
		padding: 10px;
	}
</style>

/ ****** Inside body tag ******** /

<p class="myclass" id="mytoggle">This is jQuery toggle class method</p>

<a href="javascript:void(0)" id="clickevent">Click</a>

<script>
$(document).ready(function(){
    $("#clickevent").click(function(){
        $("#mytoggle").toggleClass("myclass");
    });
});
</script>

Read Also: 10 easiest examples of javascript substring

Note: All the examples you have seen inside this article have all been made by us and tested thoroughly. So you can use all these without any difficulty.