using of 'this' to removeClass button

Question

Can't understand why I can't use 'this' for add and removing class at the same time.
This code works:
```javascript
$('button').click(function() {
  $('button').removeClass('selected');
 $(this).addClass('selected');  
 });
```
This doesn't work:
```javascript
$('button').click(function() {
  $(this).removeClass('selected');
 $(this).addClass('selected');  
 });
```

Jason Anello · Accepted Answer

Hi Giovanni,
At any given time, one of the buttons has the "selected" class applied to it. We don't want 2 buttons having the "selected" class.
So when you click on a button, either that button or one of the other buttons has the selected class.
The working code is saying, select all of the buttons and remove the "selected" class. Then add it to the one that was just clicked on. This insures that the button you just clicked on is the only one that has the "selected" class.
The non-working code is saying, remove the "selected" class from the button that was clicked and then add it back in.  This doesn't really do anything. You're removing a class and then putting it back on the same element.
If one of the other buttons had the "selected" class then you're going to have 2 buttons now with the selected class.
Let me know if it's still unclear.

Routine Poutine · Answer

Quite helpful, as I'm still trying to grok 'this.'

Welcome to the Treehouse Community

Looking to learn something new?

Giovanni Dalla Rizza

Giovanni Dalla Rizza

using of 'this' to removeClass button

2 Answers

Jason Anello

Jason Anello

lesak

lesak

Routine Poutine

Routine Poutine