.removeClass()

Remove one or all classes from each element in the set of matched elements.

Syntax

.removeClass([className]): className (optional): A class name to be removed from the class attribute of each matched element
.removeClass([function]): function (optional): A function returning one or more space-separated class names to be removed

Return value

The jQuery object, for chaining purposes.

Description

If a class name is included as a parameter, then only that class will be removed from the set of matched elements.

If no class names are specified in the parameter, all classes will be removed. More than one class may be removed at a time, separated by a space, from the set of matched elements.


$('p').removeClass('myClass yourClass')
$('p').removeClass('myClass noClass').addClass('yourClass');

The .removeClass() method allows us to indicate the class to be removed by passing in a function.


$('li:last').removeClass(function() {

 return $(this).prev().attr('class');

});

Examples

To replace all existing classes with another class, we can use .attr('class', 'newClass')

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p:even").removeClass("blue");
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
      <p class=blue>A</p>
      <p class=blue>A</p>

  </body>
</html>

Click to view the demo

Add and remove class

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <style type="text/css">
        .changeP { font-weight: bold; color:red;}
    </style>

    <script type="text/javascript">
     $(document).ready(function(){
        $("input.buttonA").click(function(){ $("p.fifthparagraph").addClass("changeP"); });
        $("input.buttonB").click(function(){ $("p.fifthparagraph").removeClass("changeP"); });

     });

    </script>
  </head>
  <body>
    <input type="button" value="Change" class="buttonA" />
    <input type="button" value="Change" class="buttonB" />


    <div style="background:#eee;" class="contentToChange">
        <h2>Header 2</h2>

        <p class="firstparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

        <p class="fifthparagraph">Lorem ipsum <em>dolor</em> sit amet, consectetuer <em>adipiscing</em> elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat <strong>volutpat</strong>. Ut wisi enim ad minim <em>veniam</em>, quis nostrud exerci <strong>tation</strong> ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

    </div>

  </body>
</html>

Click to view the demo

Remove style class from first paragraph

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p:first").removeClass("blue");
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
      <p class=blue>A</p>
      <p class=blue>A</p>
  </body>
</html>

Click to view the demo

Remove class from even number paragraph

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p:even").removeClass("blue");
        });
    </script>
  </head>
   <style>
      .blue { color:blue; }
  </style>
  <body>
    <body>
      <p class=blue>A</p>
      <p class=blue>A</p>
      <p class=blue>A</p>

  </body>
</html>

Click to view the demo