jQuery: Remove class if other element is clicked

Question

I have an ul-list that contains li-elements. When the user clicks on one of these li elements a class should be added to that element.

This is easy to setup, however, when the other li-element is clicked I want the "active"-class to be removed from the non-active li.

I have made a jsfiddle of the problem: http://jsfiddle.net/tGW3D/

There should be one li-element that is red at any one time. If you click the second and then the first, only the first should be red.

Rosmarine Popcorn · Accepted Answer · 2017-09-01T14:31:37.717

52

This will remove the active class from each li that have active and than will add to the Element which was clicked.

$('body').on('click', 'li', function() {
      $('li.active').removeClass('active');
      $(this).addClass('active');
});

edited Sep 01 '17 at 14:31

answered Oct 02 '12 at 08:46

Rosmarine Popcorn

10,761
11
59
89

1

it is not working for dynamically generated li. Need help. – pramodpxi Sep 01 '17 at 10:38
@ppmakeitcount I updated it to cover also similar cases – Rosmarine Popcorn Sep 01 '17 at 14:31

score 24 · Answer 2 · answered Oct 02 '12 at 08:46

24

You can use siblings and removeClass methods.

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

http://jsfiddle.net/Lb65e/

answered Oct 02 '12 at 08:46

Ram

143,282
16
168
197

score 5 · Answer 3 · answered Oct 02 '12 at 08:47

5

Just remove all instances of .active first, and then add it:

$('ul li').on('click', function() {  
    $('ul li.active').removeClass('active');
    $(this).addClass('active');    
});

answered Oct 02 '12 at 08:47

BenM

52,573
26
113
168

score 2 · Answer 4 · answered Oct 02 '12 at 08:47

2

$('li').click(function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

Check: http://jsfiddle.net/tGW3D/2/

answered Oct 02 '12 at 08:47

Alex

329
2
17

Michael Koper · Answer 5 · 2012-10-02T08:53:09.597

2

Something like this?

http://jsfiddle.net/c7ZE4/

You can use the siblings function. addClass returns the same jquery object $(this) so you can chain the siblings method which returns all the other elements except $(this).

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });

edited Oct 02 '12 at 08:53

answered Oct 02 '12 at 08:48

Michael Koper

9,586
7
45
59

I see now that i wasnt alone in this one :D Anyways this can be a one liner. – Michael Koper Oct 02 '12 at 08:49

score 1 · Answer 6 · answered Oct 02 '12 at 08:50

 $('li').click(function() {
      $(this).addClass('active'); // add the class to the element that's clicked.
      $(this).siblings().removeClass('active'); // remove the class from siblings. 
});

If you know jquery you can chain it like below.

 $('li').click(function() {
      $(this).addClass('active').siblings().removeClass('active'); 
});

Above code will do the trick for you. Try this demo

score 0 · Answer 7 · answered Feb 24 '17 at 13:17

0

<script>
    $(function() {
        $('li').click(function() {
            $("li.active").removeClass("active");
                $(this).addClass('active');
            });
        });
</script>

answered Feb 24 '17 at 13:17

AKM

5
1
7

You can improve the answer by providing explanation of what you do – Aleks G Feb 24 '17 at 15:32

divyanshu shukla · Answer 8 · 2020-05-28T12:54:43.820

0

  $(document).on('click','ul li',function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

This jquery code might help. Don't forget to add Jquery CDN.

edited May 28 '20 at 12:54

answered May 28 '20 at 12:49

divyanshu shukla

11
3

score 0 · Answer 9 · edited Feb 13 '21 at 06:36

0

You may use following code:

$('document').on('click', 'ul li', function() {
    $(this).addClass('active').siblings().removeClass("active") ;
});

edited Feb 13 '21 at 06:36

Johny Pie

843
3
14
37

answered Feb 11 '21 at 23:12

Redwan

1

In addition to your code snippet, it would be nice if you could explain what is happening. Even though for most people it's self-explanatory, I'm sure there are people who would be glad if some explanation is included. Also pleas format your answer so it's more readable (add it into a code block and maybe add line breaks) – Alex Berger Feb 12 '21 at 10:38

score -1 · Answer 10 · edited Jan 27 '16 at 15:16

-1

You change css class by this code:

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active'); 
});

Link to jsfiddle

edited Jan 27 '16 at 15:16

Michael

1,453
3
20
28

answered Jan 27 '16 at 14:51

Salman Aziz

426
8
15

Thanks, but the question has been answered for 4 years. :) – Albin N Jan 28 '16 at 07:18

jQuery: Remove class if other element is clicked

10 Answers10

Linked

Related