Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

RemoveClass

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
Run Effect

Click the button above to preview the effect.

Overview

removeClass( [class], [duration] )

Removes all or specified class from each of the set of matched elements with an optional transition between the states.

Dependencies

  • Effects Core

Example

Removes the class 'selected' from the matched elements with a one second transition.

$("p").click(function () {
      $(this).removeClass("selected", 1000);
    });

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<style type="text/css">
  p { cursor: pointer; font-size: 1.2em; }
  .selected { color:red; }
</style>
  <script>
  $(document).ready(function() {
    $("p").click(function () {
      $(this).removeClass("selected", 1000);
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<p class="selected">Click me to remove 'selected' class.</p>
<p class="selected">Click me to remove 'selected' class.</p>
<p class="selected">Click me to remove 'selected' class.</p>

</body>
</html>

Arguments

  • class

    Type:
    String
    Optional

    CSS classes to remove from the elements.

  • duration

    Type:
    String, Number
    Optional

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).