YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Dom Collection: Using removeClass

# Dom Collection: Using removeClass

Clicking the button will use Dom's `removeClass` method to remove the class `baz` from the element.

View example in new window.

foo

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

<div id="foo" class="bar baz">foo</div> <button id="demo-run">run</button>

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.

<script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', testClass); </script>

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 `className`s are present in the class attribute.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Dom Collection Examples:

- Using setXY
- Using getXY
- Using setStyle
- Using getStyle
- Using hasClass
- Using addClass
- Using removeClass
- Using getElementsByClassName
- Exploring the Dom Collection's API

### More Dom Collection Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings