How To Remove Class With Jquery

by

jQuery is a powerful JavaScript library that allows you to easily manipulate DOM elements and perform various operations, such as adding or removing classes from HTML elements. In this blog post, we will discuss how to remove a class from an HTML element using jQuery.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you should include the jQuery library in your project. You can either download it from the jQuery website or include it via a CDN (Content Delivery Network) like so: 

        
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Removing a Class with jQuery

To remove a class from an HTML element using jQuery, you can use the removeClass() method. The syntax for this method is as follows: 

        
            $('selector').removeClass('className');

In the above syntax, replace selector with the appropriate CSS selector that targets the element(s) you want to remove the class from, and className with the name of the class you want to remove.

Example

Let’s say we have the following HTML structure, where we have applied the class highlight to a few paragraphs: 

        
            <p class="highlight">First paragraph</p>
            <p>Second paragraph</p>
            <p class="highlight">Third paragraph</p>
            <p>Fourth paragraph</p>
            <p class="highlight">Fifth paragraph</p>

And we have the following CSS to style the paragraphs with the highlight class: 

        
            .highlight {
                background-color: yellow;
                font-weight: bold;
            }

To remove the highlight class from all the paragraphs, we can use the following jQuery code: 

        
            $(document).ready(function() {
                $('p.highlight').removeClass('highlight');
            });

With the above code, when the document is ready, jQuery will find all the paragraphs with the highlight class and remove that class from them.