CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dino
Dino

Reputation: 402

How to remove class after it been added

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:

  1. When someone clicks an h3, it adds to its parent div class
  2. 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?

Upvotes: 0

Views: 412

Answers (4)

Meetarp
Meetarp

Reputation: 2461

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.

Upvotes: 0

Jai
Jai

Reputation: 74738

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');
    }
});

Upvotes: 0

alexalexandresq
alexalexandresq

Reputation: 104

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');
    }
});

Upvotes: 3

Vikas Duhan
Vikas Duhan

Reputation: 91

Try 

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

Instead of

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

Upvotes: 0

Related Questions