How To Remove Class In Jquery

by

Adding and removing classes in HTML elements is a common task when dealing with web development. There are times when you need to change the look of an element or perform some functionality based on user interaction or other events. In this blog post, we will discuss how to remove a class from an HTML element using jQuery.

Prerequisites

Before we get started, make sure you have jQuery included in your project. You can either download it from the official website or include it from a Content Delivery Network (CDN) like Google or Microsoft. Here’s an example of how to include jQuery from Google CDN:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Removing a Class using jQuery

To remove a class from an HTML element using jQuery, you can use the .removeClass() method. This method accepts one or more class names separated by space as its argument(s). If no argument is provided, it will remove all classes from the specified element(s).

Basic Usage

Let’s say we have the following HTML structure:

    <div class="container">
        <p class="text-bold text-red">Hello, World!</p>
    </div>

And we want to remove the class text-red from the paragraph element. We can achieve this using the following jQuery code:

    $("p").removeClass("text-red");

Removing Multiple Classes

If you want to remove multiple classes from an element, simply pass them as separate arguments to the .removeClass() method. For example, let’s remove both the text-bold and text-red classes from the paragraph element:

    $("p").removeClass("text-bold text-red");

Removing All Classes

To remove all classes from an element, do not pass any argument to the .removeClass() method. This will strip the element of all its classes. In our example, this would look like:

    $("p").removeClass();

Conclusion

Removing classes from HTML elements is a breeze with jQuery’s .removeClass() method. It makes it easy to manipulate the appearance and behavior of elements on your webpage. Now you know how to remove a single class, multiple classes, or even all classes from an element using jQuery. Happy coding!