# What is the `removeClass()` method?

The **`removeClass()` method** is used to remove one, multiple, or all the class names from the class attributes of the matched elements.

In an HTML document, elements may have a class attribute with one or more class names for that element. This class attribute is used by CSS or JavaScript to perform certain tasks on the element. 

For instance, elements with the same class name in the class attribute can be used to apply the same style on them using CSS. 

<br>

# Syntax

The `removeClass()` method has three signatures:

## 1. No argument

- **`removeClass()`:** Call to the method
- **No argument:** When no argument is passed, all the class names are removed from the selected element's class attribute.


## 2. Space separated list as an argument

- **`removeClass()`:** Call to the method
- **`className`:** One or more space-separated class names to be removed from the class attribute of each matched element.

## 3. Function as an argument

- **`removeClass()`:** Call to the method
- **`function`:** A function returning one or more space-separated class names to be removed from the class attribute of each matched element.  The function receives the index position of the element in the set and the old class value as arguments.


# Examples
Here are some examples showing the use of `removeClass()` method signatures:

## 1. Removing all classes

Calling `removeClass()` method without any argument removes all the class names from the class attribute of the selected element. 

.red_color{
    color: #45597E;
}

.big_font{
    font-size: 50px;
}

.italics{
    text-decoration: underline;
}

<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>

codemirror

## 2. Space separated list as an argument

Calling `removeClass([classname])` method with space separated list as an argument removes all specified class names from the class attribute of the selected element.

<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>

## 3. Function as an argument

Calling `removeClass(function)` method with a function as an argument expects a space separated list of class names that are removed from the class attribute of the selected elements.

<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 to use removeClass() method in jQuery

What is the removeClass() method? The removeClass() method is used to remove one, multiple, or all the class names from the class attributes of the matched elements. In an HTML document, elements may have a class attribute with one or more class names for that element. This class attribute is used by CSS or JavaScript to perform certain tasks on the element. For instance, elements with the same class name in the class attribute can be used to apply the same style on them using CSS.  Syntax The removeClass() method has three signatures: 1. No argument  removeClass(): Call to the method No argument: When no argument is passed, all the class names are removed from the selected element s class attribute.  