addClass and removeClass in jQuery - not removing class

Question

I m trying to do something very simple  Basically I have a clickable div  hot spot   when you click that it fills the screen and displays some content  I achieved this by simply changing the class of div  removing  spot  and adding  grown  and there s a little CSS animation to make it grow  This works fine    The problem is  within this div there is a close button  which at the moment is just text  I want this to switch the classes back - i e  remove grown and readd spot  It doesn t do this when clicked  I believe it s to do with the element not having those classes when the DOM loads  but I m new to jQuery and don t know how to work around this   I think there s probably a much more sensible way of doing it  could someone point me in the right direction  I d be very grateful  I ve tried using toggleClass instead to no avail      document   ready function                   clickable   click function                 this  addClass  grown                this  removeClass  spot                        close button   click function               alert  this               spot1   removeClass  grown                  spot1   addClass  spot                     UPDATE   I am using this code now       document   ready function              document  on  click     close button   function               alert   oi                spot1   addClass  spot                spot1   removeClass  grown                      document  on  click     clickable   function              if    this  hasClass  spot                   this  addClass  grown                  this  removeClass  spot                            strangely the close button function still won t add  spot  or remove  grown  though it will add any other classes and it will remove other classes    I added the if clause because I thought perhaps both function were being triggered at the same time  undoing each other  but it seems to make no difference

User · Answer

I think that the problem is in the nesting of the elements. Once you attach an event to the outer element the clicks on the inner elements are actually firing the same click event for the outer element. So, you actually never go to the second state. What you can do is to check the clicked element. And if it is the close button then to avoid the class changing. Here is my solution:

var element = $(".clickable");
var closeButton = element.find(".close_button");
var onElementClick = function(e) {
    if(e.target !== closeButton[0]) {
        element.removeClass("spot").addClass("grown");
        element.off("click");
        closeButton.on("click", onCloseClick);
    }
}
var onCloseClick = function() {
    element.removeClass("grown").addClass("spot");
    closeButton.off("click");
    element.on("click", onElementClick);
}
element.on("click", onElementClick);

In addition I'm adding and removing event handlers.

JSFiddle -> http://jsfiddle.net/zmw9E/1/

User · Answer

What happens is that your close button is placed inside your  clickable div  so the click event will be triggered in both elements    The event bubbling will make the click event propagate from the child nodes to their parents  So your  close button callback will be executed first  and when  clickable is reached  it will toggle the classes again  As this run very fast you can t notice the two events happened                           --------------------   -----------------    clickable                                 ----------------   -----------              close button                          ------------------------------                     event bubbling             ----------------------------------------   To prevent your event from reaching  clickable  you need to add the event parameter to your callback function and then call the stopPropagation method on it       close button   click function  e             spot1   addClass  spot            spot1   removeClass  grown        e stopPropagation          Fiddle  http   jsfiddle net u4GCk 1   More info about event order in general  http   www quirksmode org js events order html  that s where I picked that pretty ASCII art

User · Answer

I actually just resolved an issue I was having by swapping around the order that I was altering the properties in  For example I was changing the attribute first but I actually had to remove the class and add the new class before modifying the attributes  I m not sure why it worked but it did  So something to try would be to change from    XXXX   attr  something   removeClass   class    addClass   newClass    to    XXXX   removeClass   class    addClass   newClass    attr  something

User · Answer

The issue is caused because of event bubbling  The first part of your code to add  grown works fine    The second part  removing grown class  on clicking the link doesn t work as expected as both the handler for  close button and  clickable are executed  So it removes and readd the grown class to the div   You can avoid this by using e stopPropagation   inside  close button click handler to avoid the event from bubbling   DEMO  http   jsfiddle net vL8DP   Full Code    document  on  click     clickable   function           this  addClass  grown   removeClass  spot       on  click     close button   function  e       e stopPropagation         this  closest   clickable   removeClass  grown   addClass  spot

User · Answer

Try this        close-button   on  click   function          element   removeClass  grown          element   addClass  spot             element   on  click   function        this  removeClass  spot        this  addClass  grown          I hope I understood your question

User · Answer

I would recomend to cache the jQuery objects you use more than once  For Instance         document  on  click     clickable   function                this  addClass  grown              this  removeClass  spot              would be       var doc     document       doc on  click     clickable   function           var currentClickedObject     this          currentClickedObject addClass  grown           currentClickedObject removeClass  spot              its actually more code  BUT it is muuuuuuch faster because you dont have to  walk  through the whole jQuery library in order to get the   this  object

User · Answer

Whenever I see addClass and removeClass I think why not just use toggleClass  In this case we can remove the  clickable class to avoid event bubbling  and to avoid the event from being fired on everything we click inside of the  clickable div     document  on  click     close button   function             this  closest   grown   toggleClass  spot grown clickable             document  on  click     clickable   function            this  toggleClass  spot grown clickable           I also recommend a parent wrapper for your  clickable divs instead of using the document  I am not sure how you are adding them dynamically so didn t want to assume your layout for you    http   jsfiddle net bplumb ECQg5 2   Happy Coding

User · Answer

Use  on    you need event delegation as these classes are not present on DOM when DOM is ready     document  on  click     clickable   function            this  addClass  grown          this  removeClass  spot          document  on  click     close button   function                  spot1   removeClass  grown            spot1   addClass  spot

User · Answer

I think you re almost there   The thing is  your   this  in the  close button  listener is not the clickable div  So you want to search it first  try to replace   this  with   this  closest   clickable     And don t forget the e stopPropagation   as Guilherme is suggesting  that should be something like       document   ready function              document  on  click     close button   function               alert   oi            e stopPropagation             this  closest   clickable   addClass  spot              this  closest   clickable   removeClass  grown                      document  on  click     clickable   function              if    this  hasClass  spot                   this  addClass  grown                  this  removeClass  spot

User · Answer

why not simplify it   jquery      clickable   on  click   function      on parent click       this  removeClass  spot   addClass  grown     use remove add Class here because it needs to perform the same action every time  you don t want a toggle    children   close button   on  click   function e     on close click     e stopPropagation     stops click from triggering on parent       this  parent   toggleClass  spot grown     since this only appears when  grown is present  toggling will work great instead of add remove Class and save some space       This way it s much easier to maintain   made a fiddle  http   jsfiddle net filever10 3SmaV

[jquery] addClass and removeClass in jQuery - not removing class

Examples related to jquery

Examples related to dom

Examples related to addclass

Examples related to removeclass

Examples related to toggleclass