Prototype.js tip: Remove class name from a group of elements

Posted by Evan in Website Development

I’m using jQuery mostly these days but a few of my previous projects were built on Prototype so I’ve been keeping up with both libraries. I learned a cool trick today for Prototype.js that I thought I would share.

So, have you ever wanted to remove a certain class name from a group of tags? This might be useful if you have a list of options and you want to change the visual style of the element for the selected element while changing all other items back to their “default” state. This will do that!

Let’s say we have a few anchor tags that make up a row of tabs on the interface:

<a id="tab1" href="#" class="selected tabs" onclick="loadTab(1); return false;">Page 1</a>
<a id="tab2" href="# class="tabs" onclick="loadTab(2); return false;">Page 2</a>
<a id="tab3" href="# class="tabs" onclick="loadTab(3); return false;">Page 3</a>

When one of the <a> tags is clicked I want it to add a class name, and I want to remove the selected class from all other tags with a class name of “tabs”. I’ll assume that you’re familiar with the Element.addClassName() function of Prototype.js and skip that part, but I do want to show you an easy way of removing the “selected” class from all of the elements with a class of “tabs”.

function loadTab(NUM) {
      $$('.tabs').each( function (s) { s.removeClassName('selected'); });
      $('tab'+NUM).addClassName('selected');
      return true;
}

BOOM! Simple as that. Now you’ll be on your way to creating dynamic and beautiful UIs in no time!</a>