CODEWITHSUNDEEP
javascripthtml
19wolf
19wolf

Reputation: 402

Remove class on adding class to another element

I have a long list of image elements, each with it's own ID. I've already set it up so that when you click on one image, it will toggle a class "foo". What I'd like to do is set it up so that when you click on another image, the first image's class "foo" will be removed. I'd like to do this with pure javascript if possible. Thanks.

Here's a fiddle: http://jsfiddle.net/q3aRC/

function clicked($id) {
    document.getElementById($id).classList.toggle('foo');
}

Upvotes: 0

Views: 141

Answers (3)

nnnnnn
nnnnnn

Reputation: 150020

Since you are already using classList I assume you're only catering to browsers new enough for addEventListener(), so I'd suggest removing all of the onclick attributes and doing something like this:

document.addEventListener('click',function(e){
    if (e.target.tagName === "IMG") {
        var imgs = document.getElementsByTagName('IMG');
        for (var i = 0; i < imgs.length; i++)
            if (imgs[i] != e.target)
                imgs[i].classList.remove('foo');

        e.target.classList.toggle('foo');
    }
}, false);

Demo: http://jsfiddle.net/q3aRC/3/

That is, bind a single click handler to the document (or you could bind to a parent element of the images if they share a common parent), and then on click test if the clicked item is one of the elements you care about (i.e., an img) and go from there... The JS ends up about the same length, but the html ends up shorter and neater. You could actually remove the id attribute too if you weren't using it for anything other than your original clicked() function.

I used getElementsByTagName() just to show you yet another way of doing it, but getElementsByClassName() or querySelectorAll() (as in the other answers) are probably better options. But that's an easy switch to make.

Upvotes: 2

Juan Guerrero
Juan Guerrero

Reputation: 613

I would add a common class to all images and remove the foo class from all of them. Then I would add the class to the specific image

function clicked(id){
  var images = document.getElementsByClassName('images');
  for (var i = 0; i < images.length; ++i) {
    images[i].classList.remove('foo');
  }

  document.getElementById(id).classList.add('foo');
}

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

I'd suggest, given that you're already using the classList api:

function clicked($id) {
    // get all the elements with the class-name of 'foo':
    var others = document.querySelectorAll('.foo');
    // if there *are* any elements with that class-name:
    if (others.length){
        // iterate through that collection, removing the class-name:
        for (var i = 0, len = others.length; i < len; i++){
            others[i].classList.remove('foo');
        }
    }
    /* add the class-name back (if it already had the class-name
       we removed it in the previous section): */
    document.getElementById($id).classList.add('foo');
}

JS Fiddle demo.

References:

Upvotes: 3

Related Questions