1. Home
  2. Development
  3. Remove multiple classes using .removeClass

Remove multiple classes using .removeClass

thumbnail
Randy Parsons, modified 12 Years ago.
Remove multiple classes using .removeClass
Junior Member Posts: 33 Join Date: 1/4/11 Recent Posts
Hello, I hoping someone can assist me locating the correct AUI javaclass to add for removing multiples class names from a node at one time.

The use of 
A.node("#myId").removeClass('foo')

only allows the removal of one class at a time. I need to remove a bunch before I add a new class.

I found from an old forum (2010) that there is a YUI module called 'gallery-dom-node-removeclass' that overrides DOM, Node and NodeList .removeClass methods and it allows removing multiple or single classes at once like the popular framework jQuery does.
Example of YUI Usage
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.09.01-19-12'
}).use('gallery-dom-node-removeclass', function(Y) { 
    var node = Y.Node.create('<p class="foo bar baz bat abc">sample</p>');
    node.removeClass('bar abc bat');
    Y.log(node.get('className'); // "foo baz" 
});

I'm trying to find an equivalent in the 6.1.2 Liferay version.

Thanks
thumbnail
Jonathan Mak, modified 12 Years ago.
RE: Remove multiple classes using .removeClass
Junior Member Posts: 44 Join Date: 2/3/11 Recent Posts
Hi Randy,

Currently, there is no way in removing multiple classes in YUI in the fashion that are you requesting. The only way to achieve this is by chaining .removeClass() to remove the desired class name.

I found a ticket for YUI (http://yuilibrary.com/projects/yui3/ticket/2528252) to add this ability, but it has been backlogged.

I hope this helps!
thumbnail
Randy Parsons, modified 12 Years ago.
RE: Remove multiple classes using .removeClass
Junior Member Posts: 33 Join Date: 1/4/11 Recent Posts
Hi Jonathon,

When you mention
The only way to achieve this is by chaining .removeClass() to remove the desired class name.

do you mean like this...
A.one("#previewNote").removeClass('yellow').removeClass('red').addClass(color);

because I have not been able to get this to work. Color is a variable such as 'blue'.

To maybe better assist with my issue, I'm trying to change the class that references a color on a click event.
I have a number of color 'classes' that can be selected and I just want to replace what is currently there to my new one. The problem is that there are multiple other classes used so I don't want to just replace the whole class list with my new color - just the color element.

Thanks in advance,
Randy