Hey guys, the question pretty much asks itself... however, for more clarity:

I have an element called "chuckPalahniuk" and it has classes named "choke", "fightclub" and "haunted".

How could I get it so when I click on the "chuckPalahniuk" element, it removes "haunted" first, then "fightclub" on the second click and "choke" on the third?

also: be aware that the class names are dynamically added.

Cheers. peeeps!

psy.example:

$('#chuckPalahniuk').click(function() {
  $(this).removeLastClassAdded(); //except this function doesn't exist...
});

Hey guys, the question pretty much asks itself... however, for more clarity:

I have an element called "chuckPalahniuk" and it has classes named "choke", "fightclub" and "haunted".

How could I get it so when I click on the "chuckPalahniuk" element, it removes "haunted" first, then "fightclub" on the second click and "choke" on the third?

also: be aware that the class names are dynamically added.

Cheers. peeeps!

psy.example:

$('#chuckPalahniuk').click(function() {
  $(this).removeLastClassAdded(); //except this function doesn't exist...
});

• javascript
• jquery

• 1 get the class list by stackoverflow./questions/1227286/… and remove last entery – Haim Evgi Commented Nov 11, 2010 at 15:07

3 Answers 3

just save in an array variable c every class you add c.push('yourclass'), then $(this).removeClass(c.pop());

http://www.devguru./technologies/ecmascript/quickref/pop.html

This will do it and will deal with leading and trailing whitespace, which a split()-based solution will not:

$('#chuckPalahniuk').click(function() {
    this.className = this.className.replace(/(^|\s+)[^\s]+(\s+)?$/, "");
});

Something like:

$('#chuckPalahniuk').click(function() {
    $(this).removeClass($(this).attr('class').split(/\s+/).pop());
});