For working professionals
For fresh graduates
Study abroad
More

jQuery removeClass() Method

Updated on 31/01/2025382 Views

Table of Content

JQuery is a lightweight, do-more JavaScript library. It makes it easier for us to use JavaScript on the website. However, it takes tasks that may require lines of JavaScript code to accomplish the process and wraps them in different methods with a single code line.

In jQuery, we can just write fewer code lines, unlike JavaScript. We can import the library to use specific library functions. Also, it has an inbuilt cross-browser compatibility feature, so we don't have to worry about browser compatibility. In addition, it simplifies complex things in JavaScript, such as DOM manipulation. JQuery contains features like CSS manipulation, HTML event methods, DOM manipulations, animations, utilities, and Ajax. You can also utilize jQuery removeClass in a project-based approach.

Benefits of Using jQuery in Applications

Web developers can benefit greatly from jQuery. By offering a clear and simple syntax for basic tasks like DOM manipulation, event handling, and AJAX requests, jQuery streamlines JavaScript programming. It makes it simpler for beginners to get started by abstracting away many of the complexity of JavaScript. Among its advantages are:

We can integrate jQuery with other IDEs. Most developers use it with Visual Studio and NuGet.
Animation becomes simple with this method, and we can practice optimization methods on our site while not switching to technologies like Flash.
JQuery is search engine optimization-friendly, which is the biggest plus point to optimizing a website on SERP.
As the iQuery library is easy to use, we can run it in all the major browsers. Also, jQuery is faster than other libraries as it uses less code.
JQuery removeClass is flexible, as we can remove classes from the element.

Why Must You Use jQuery?

jQuery is simple to understand as we need to write only a few code lines for simple things, which saves time. Moreover, new developers can create the best patterns for sites and applications using jQuery.

Any developer who has spent hours with coding implementation would agree that jQuery brings the best to the table. The main purpose of using jQuery is to create smart and modern websites.

We will also discuss another vital function of jQuery in detail: jQuery removeClass. We will learn different ways to remove and add classes to HTML elements with the function.

What is a jQuery removeClass Method?

JQuery removeClass can remove single or multiple names, or class names from class attributes of match elements. In a standard HTML document, all elements have class attributes with one or more class names. Also, we can use JavaScript or CSS in class attributes to perform tasks on the elements.

For example, we can use elements with the same class name in the class attribute to apply the same style with CSS. JQuery removeClass is an inbuilt method, so we can use it to remove one or more class names from different selected elements. However, there is a syntax we need to follow to use the add-remove class in jQuery.

Syntax:

$(selector).removeClass(class_name, function(index, current_class_name))

The above command accepts different parameters.

Class_name is an optional parameter we can use to specify a class name to remove it. Ideally, we can separate multiple class names with a space.

Function: It is an optional jQuery removeClass parameter that can return a class name we wish to remove. Index: It returns the index of the element in the class name. Current class name: This parameter returns the class name of all the selected elements.

Let's understand the return value of jQuery removeClass:

Return value: Returns the selected elements when we specifically remove the class name.

Examples of the jQuery removeClass Method

Some examples to demonstrate the use of the jQuery remove class method are listed below.

Example 1:

<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function () {
$("p").click(function () {
$("p").removeClass("GFG");
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 50%;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">
Welcome to
</p>
<p class="GFG">
GeeksforGeeks
</p>
</div>
</body>
</html>

Example 2: This example does not contain a specific parameter. With this code, we can remove all the classes for selected elements:

<!DOCTYPE html>
<html>
<head>
<title>The removeClass Method</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery code to show the working of this method -->
<script>
$(document).ready(function () {
$("p").click(function () {
$("p").removeClass();
});
});
</script>
<style>
.GFG {
font-size: 120%;
color: green;
font-weight: bold;
font-size: 35px;
}
div {
width: 300px;
height: 200px;
padding: 20px;
border: 2px solid green;
}
</style>
</head>
<body>
<div>
<!-- click on any paragraph and see the change -->
<p class="GFG">
Welcome to
</p>
<p class="GFG">
GeeksforGeeks!
</p>
</div>
</body>
</html>

Signatures of jQuery removeClass Method

Primarily, the method has three signatures: no argument, a space-separated list as an argument, and a function as an argument. Let’s check all in detail.

No argument:

When you call the removeClass method without an argument, it removes all the class names from the class attributes of the selected element.

Space-separated list as an argument:

A space-separated list is used to remove a class and its name. We can remove one or more space-separated class names from the class attributes of matched elements.

Function as an argument:

We can use removeClass and function in the signature. RemoveClass calls to the method and function can remove one or more space-separated class names from the class attributes of matched elements. Also, the function receives index position in the set and old-class significance as arguments.

Let’s now move to signature examples of the jQuery removeClass method.

Example 1: No argument

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bttn").click(function(){
$("h1").removeClass();
});
});
</script>
</head>
<body>
<h1 class="red_color big_font italics">Educative!</h1>
<button id="bttn">Remove Class!</button>
</body>
</html>

Example 2: Space-separated list as an argument

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bttn").click(function(){
$("h1").removeClass("red_color big_font");
});
});
</script>
</head>
<body>
<h1 class="red_color big_font italics">Educative!</h1>
<button id="bttn">Remove Class!</button>
</body>
</html>

Example 3: Function as an argument

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bttn").click(function(){
$("h1").removeClass(function(){
return $(this).attr( "class" );
});
});
});
</script>
</head>
<body>
<h1 class="red_color big_font italics">Educative!</h1>
<button id="bttn">Remove Class!</button>
</body>
</html>

How Can You Use the jQuery in the addClass and removeClass Methods?

The add and remove class jQuery method can add and remove CSS classes when we need to add or remove them from the web page.

The syntax we can use for the class is:

// Adding class using addClass()
$('selector').addClass(class_name);
// Adding class using removeClass()
$('selector').removeClass(class_name);

Given below is an example of adding a class that will make the background black when we click on add class. Plus, we can remove the added class when clicking on the removeClass option.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
}
div {
margin: 2rem;
text-align: center;
}
#GFG_IMAGE{
position: relative;
transition: transform 0.5s ease-in;
transform-style: preserve-3d;
}
.flip {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Flip the image by adding the .flip class</h3>
<button id="btnadd"> ADD CLASS </button>
<button id="btnremove"> REMOVE CLASS </button>
<div id="GFG_IMAGE">
<!-- Image added using img tag
with src attribute -->
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231212145751/gfgImage.png"
height='150px' width='150px'>
<img>
</div>
</center>
<script>
$(document).ready(function() {
$('#btnadd').click(function() {
$('#GFG_IMAGE').addClass('flip');
});
$('#btnremove').click(function() {
$('#GFG_IMAGE').removeClass('flip');
});
});
</script>
</body>
</html>

Conclusion

We can use jQuery removeClass to remove one or more class names from the selected elements. If we do not specify a parameter, it will remove all the class names. We can add and remove classes in jQuery with the right parameters. Additionally, we can use the feature jQuery removeClass multiple. We have to first select the element to which we want to add multiple classes. Then, use the jQuery removeClass method to remove multiple classes. Lastly, jQuery simplifies interactions between CSS/HTML documents.

FAQs:

1. What is the use of removeClass in jQuery?

JQuery removeClass helps to remove single or more class names from the selected elements. If you don't specify the parameter, the method will remove all the classes from the elements.

2. How to remove a class if it exists in jQuery?

You can use the toggleClass method. The syntax for the method is:

$(selector).toggleClass(className)

3. How to remove a class in HTML using jQuery?

You can easily remove a class in HTML using jQuery. The syntax you can use is:

$(selector).removeClass(className)

4. How to remove style using jQuery?

To remove the attribute from the tag, you can use the remove attribute method and the universal selector.

5. How do I remove class style?

You can use the removeClass method. The syntax you can use for this is:

$(selector).removeClass(className)

6. How to remove a style class in JavaScript?

To remove the style class in JavaScript, you can use the classList.remove() method. To remove myClass from the element with myElement, you can use this code:

const element = document.getElementById('my-element');element.classList.remove('my-class');

Join 10M+ Learners & Transform Your Career

Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918045604032

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.