jQuery Tutorial Concepts - From Beginner to Pro
Learn jQuery from scratch! Our tutorial covers basics to advanced concepts. Start learning today!
- 19
- 3
Tutorial Playlist
19 Lessons1. jQuery Tutorials
2. jQuery Ajax
3. jQuery CSS
4. Document Ready jQuery
5. jQuery Selectors
6. jQuery Events
7. jQuery Attribute
8. jQuery addClass() Method
9. GET method and the POST method
10. OnChange Function in jQuery
11. Hide and Show in jQuery
12. Jquery Toggle
13. jQuery append() Method
Now Reading
14. jQuery html()
15. jQuery closest Method
16. jQuery hasClass() Method
17. jQuery removeClass
18. jQuery find() Method
19. jQuery Remove Attribute
jQuery removeClass() Method
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');
Rohan Vats
Rohan Vats
Software Engineering Manager @ upGrad. Assionate about building large scale web apps with delightful experiences. In pursuit of transforming engi…Read More
Get Free Career Counselling
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...