Clash Royale CLAN TAG#URR8PPP

Not Able to Remove a Class On second Click in jQuery

can you please take a look at this demo and let me know why I am not able to fix this issue?

Basically what I want to do is adding the .ani class to the clicked element and removing the .ani from all BUT I also need to remove the .ani from the element which already have it on second click.

.ani

.ani

.ani

As you can see the regular add and removing is working fine but I can not remove the .ani on existing element

.ani

$(".list").on('click', function()
$('.list').removeClass("ani");
if ($(this).hasClass('ani'))
$(this).toggleClass("ani");
else
$(this).addClass("ani");

);

.list
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;


.ani
background: red;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>

4 Answers
4

It looks like you are over complicating this task. Take a look at the code below (posting only the JS as HTML and CSS are the same):

$(".list").on('click', function()
$(this).toggleClass("ani").siblings().removeClass("ani");
);


A breakdown of what this does:

toggleClass

How this works:

The bit of code in the example above uses something called method chaining where you execute multiple methods on the same jQuery Object. This is possible because most jQuery methods return a jQuery Object, post-execution. This makes it easier and faster to run a bunch of operations on the same set of elements. One thing that you need to be mindful about when chaining is the sequence of method calls - changing the order of methods that you use may result in adverse effects (i.e: most traversal methods in jQuery returns a different set of elements).

Fiddle: http://jsfiddle.net/darshanags/kz2wdo09/

Check this one. Just update onclick method. All other code is the same. I posted one is single line code and one if-else code which is commented. You can use which one is more comfortable for you. You are first removing ani class that was a bug in your code.

onclick

$(".list").on('click', function()
$(this).toggleClass("ani").siblings().removeClass("ani");
/*if($(this).hasClass("ani"))
$(".list").removeClass("ani");
else
$(".list").removeClass("ani");
$(this).addClass("ani");
*/
);

.list
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;


.ani
background: red;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>

In this code:

$(".list").on('click', function()
$('.list').removeClass("ani");
if ($(this).hasClass('ani'))
$(this).toggleClass("ani");
else
$(this).addClass("ani");

);


You're removing the class of every .list element, therefore the $(this).hasClass('ani') will always be false (you just removed the ani class of every single .list element, including the clicked one), so the line $(this).addClass("ani") will always be executed.

.list

$(this).hasClass('ani')

ani

.list

$(this).addClass("ani")

The solution is simple. Check if the clicked element has the ani class and if so, remove it, otherwise add it:

ani

$(".list").on('click', function()
if ($(this).hasClass('ani'))
$(this).removeClass("ani");

else
$('.list').removeClass("ani");
$(this).addClass("ani");

);


you want to remove class ani on all the elements except the clicked one. You can use not()

ani

not()

$(".list").on('click', function(evt)
$(".list").not($(evt.currentTarget)).removeClass("ani");
$(evt.currentTarget).toggleClass("ani");

);

.list
height: 60px;
width: 160px;
background: yellow;
margin: 4px;
cursor: pointer;


.ani
background: red;


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.