Using removeClass

removeClass, part of the YUI Dom Collection, makes it easy to remove a given className from an element.

To illustrate the use of removeClass, we'll create a <div> called foo with the classNames of bar and baz. When the button is clicked, we will remove the className baz from the element.

Add some markup for the demo element and a button to trigger the demo:

Now we will define the function that removes the class baz from the foo element. The first argument of the removeClass method is either the ID of an HTMLElement, or an actual HTMLElement object. The second is the className to be removed. <script type="text/javascript"> var removeClass = function() { YAHOO.util.Dom.removeClass('foo', 'baz'); alert(YAHOO.util.Dom.get('foo').className); }; </script>

To trigger the demo, we will use the YUI Event Utility's on method to listen for clicks on the button.

This is a simple example of how to use the YAHOO.util.Dom.removeClass method. One of the benefits of this method is that it works regardless of how many classNames are present in the class attribute.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.