How to remove class after it been added

Question

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:

When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed

First step I got out of way and it's working

$(function(){
    $('div h3.itemTitle').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

Now when I define:

$(function(){
    $('div.active').on('click', function(){
        $(this).removeClass('active');
    });
});

It does nothing, as if it doesn't see classes. It sets only those set in onload...

Help, anyone?

As indicated in the duplicate, that form of `on` only works with elements that are in the DOM at the time it executes. You should use the form that attaches to a parent element of the ones that should be affected and monitors changes in the DOM inside itself. — Klors, Jul 23 '14 at 11:52
possible duplicate of [jQuery .live() vs .on() method for adding a click event after loading dynamic html](http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht) — Klors, Jul 23 '14 at 11:53
I'm not sure that link answers my particular question since I'm looking for solution, not necessary with .on('click'), but any solution that will work for me. — Dino, Jul 23 '14 at 11:57
What about `$('h3.itemTitle').parent().on('click', function(){$(this).removeClass('active'))};`? Kinda long-winded, I know. — afaolek, Jul 23 '14 at 11:59

score 3 · Accepted Answer · answered Jul 23 '14 at 12:02

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.

Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.

I recommend this approach: http://jsfiddle.net/c3Q6Q/

$('div h3.itemTitle').on('click', function () {
    // saves time not to write $(this).parent() everything so i store in a _parent var
    var _parent = $(this).parent();

    if (_parent.hasClass('active')) {
        _parent.removeClass('active');
    } else {
        _parent.addClass('active').siblings().removeClass('active');
    }
});

Glad i could help. There's no issue with "on", "live" and such, just the click target. — alexalexandresq, Jul 23 '14 at 12:09

score 0 · Answer 2 · answered Jul 23 '14 at 11:50

0

Try

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

Instead of

$('div.active').on('click', function(){$(this).removeClass('active');});

answered Jul 23 '14 at 11:50

Vikas Duhan

91
7

2

Where's the explanation? Why? – Casey Falk Jul 23 '14 at 11:50
1

And what about "(1) When someone clicks onto h3 it adds to it parent div class"? – Casey Falk Jul 23 '14 at 11:52
h3 click will work as coded by you, because of the concept of 'future element' which are added or modified after the DOM load. – Vikas Duhan Jul 23 '14 at 12:01

score 0 · Answer 3 · answered Jul 23 '14 at 12:02

I would go with this way:

$('div').on('click', function(e){
    var el = e.target;
    if($(el).is('h3') && $(el).hasClass('itemTitle')){
       $(this).parent().addClass('active').siblings().removeClass('active');
    }else if($(el).is('div') && $(el).hasClass('active')){
       $(this).removeClass('active');
    }
});

score 0 · Answer 4 · answered Jul 23 '14 at 12:04

Not sure why every is talking about elements generated outside of the initial DOM load.

Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/

Code:

$(document).ready(function() {
    $('.itemTitle').on('click', function() {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });

    /* $('.parent').on('click', function() {
        $(this).removeClass('active');
    }); */

    $('.clicky').on('click', function() {
        $(this).parent().removeClass('active');
    });
});

The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.

How to remove class after it been added

4 Answers4