What is jQuery removeClass()?
The jQuery removeClass() method removes class attributes from a selected element. Removing class attributes can be as global or specific as needed. The class attributes are assigned in the HTML file and styled via CSS.
Using jQuery to communicate between HTML and CSS provides the ability to build more responsive web applications. By incorporating removeClass() and removing the class attribute, developers can essentially “turn off” the CSS styling of the HTML. Often, removeClass() is used in conjunction with addClass().
addClass() is the inverse of removeClass and shares syntax practices. Learn more about addClass() in this guide.
How jQuery removeClass() Works
removeClass() removes class attributes from a selected element. Suppose you have a <div> with a couple of <p> tags. Each <p> tag has a different class that is styled in CSS. We could remove the class attributes of all <p> tags by selecting the element “p”. This would essentially “turn off” the CSS styling and render the <p> tags in raw HTML.
To get more specific with our class attributes, we can pass the class name in as a parameter to removeClass(). This removes only class attributes listed. Both a general and specified removal of class attributes can be accomplished in one line of code.
Now that we know how removeClass() works, let’s talk about syntax.
jQuery removeClass() Syntax
The syntax for removeClass() is similar to most other methods in jQuery. Let’s continue our <p> tag example from earlier.
$(‘p’).removeClass()
We start with the jQuery selector method $ to select all the <p> tags. Calling removeClass() with no parameters will simply remove all class attributes from the selected elements. As our code stands now, our <p> tags are without any styling.
Let’s remove only one class attribute from our <p> tags.
$(‘p’).removeClass(‘primaryClass’)
Here we have passed the class name primaryClass to our removeClass() method. This removes all class attributes from <p> tags with the primaryClass class name. Now only those <p> tags are not styled, leaving any other <p> tag belonging to a different class untouched.
removeClass() can accept many class names as parameters. Write them with a space in between like this:
$(‘p’).removeClass(‘classOne classTwo classThree’)
This removes class attributes from all the <p> tags with a class name of classOne, classTwo, or classThree.
Now that we’ve covered the basic syntax of removeClass(), let’s take a look at a couple of examples.
jQuery removeClass() Examples
We will expand our <p> tag example to include all three syntax options. Let’s start by setting up our basic HTML page.
<head>
<style>
.green {
color: green;
}
.strike {
text-decoration: line-through
}
.highlight {
background: purple
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
removeClass() Demo:
</h2>
<p class='green'>
Hello
</p>
<p class='highlight'>
World
</p>
<p class= 'green strike'>
Goodbye
</p>
</body>Our basic HTML looks like this:
Beginning by not passing removeClass() any parameters, we can remove all class attributes from the <p> tags.
$(‘p’).removeClass()
Now our HTML page renders like this:
Exactly what we predicted! Now let’s remove class attributes from any <p> tags belonging to the class “green.”
$('p').removeClass('green')
This should remove the color green from the words “Hello” and “Goodbye.” The purple highlight on the word “World” and the strikethrough on “Goodbye” will remain intact.
Excellent! Let’s pass two class names to removeClass(). We can remove the purple highlight and the strikethrough in one line of code:
$(‘p’).removeClass(‘highlight strike’)
Now we should see the green color return to “Hello” and “Goodbye.”
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
We’ve seen removeClass() remove all or some class attributes depending on what parameters it is passed. Let’s recap what we’ve learned so you can go practice your new skill!
Conclusion
jQuery removeClass() removes class attributes of the selected element. If no parameters are passed to removeClass(), it simply removes all attributes of the element. It is capable of selecting multiple class names as parameters, so a combination of removal is possible in a single line of code.
Attributes for classes can be more complex than colors. They could be animations or any number of desired behaviors. By removing the class attributes, we are essentially “turning off” these behaviors. As you get more comfortable using the removeClass() method, try using removeClass() with a jQuery event listener to create a dynamic user experience.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
