removeClass does not work

Question

I am trying for the life of me to figure out how to get it to remove a class when clicking another link. I want it so it only highlights the specific area selected but the remove class isn't removing the class. So it stays highlighted as specified in the class underNavselected. Can anyone assist?

This is all on one page, not linking to other docs. I am hiding and unhiding content with each click.

jQuery(document).ready(function() {
    jQuery(".toTop").hide();
    jQuery(".aboutHeader").hide();
    jQuery(".LAM").hide();
    jQuery(".WID").hide();
    jQuery(".MyG").hide();
    jQuery("#LAMlink").live("click", function()
    {
        jQuery(this).addClass("underNavselected");
        jQuery(".LAM").slideToggle(500);
        jQuery(".WID").hide();
        jQuery(".MyG").hide();
        jQuery("#MyGlink", "#WIDlink").removeClass("underNavselected");
    });
    jQuery("#WIDlink").live("click", function()
    {
        jQuery(this).addClass("underNavselected");
        jQuery(".WID").slideToggle(500);
        jQuery(".LAM").hide();
        jQuery(".MyG").hide();
        jQuery("#LAMlink", "#MyGlink").removeClass("underNavselected");
    });
    jQuery("#MyGlink").live("click", function()
    {
        jQuery(this).addClass("underNavselected");
        jQuery(".MyG").slideToggle(500);
        jQuery(".LAM").hide();
        jQuery(".WID").hide();
        jQuery("#LAMlink", "#WIDlink").removeClass("underNavselected");
    });
});

Don't use `live`. It's deprecated and removed in 1.9. Delegate with `on`. — John Dvorak, Jan 25 '13 at 00:35
As an aside, you don't show your html, but I suspect that with a few minor changes to it you could easily combine those three click handlers into a single more generic function. — nnnnnn, Jan 25 '13 at 00:48

Nix · Accepted Answer · 2013-01-25T01:08:59.010

2

You incidentally used a descendant selector your code was equivelent to "#LAMlink #WIDlink" which means you are looking for a WIDlink that has an ancestor of LAMlink

So the proper solution is to change:

jQuery("#LAMlink", "#WIDlink")

to

jQuery("#LAMlink, #WIDlink")

Notice mine is all the same string.

edited Jan 25 '13 at 01:08

answered Jan 25 '13 at 00:35

Nix

57,072
29
149
198

1

How do you know he doesn't want the `#LAMlink` that is inside `#WIDlink`? :-) – John Dvorak Jan 25 '13 at 00:36
That worked perfectly. Thank you so much! I can't believe it was that slight misstep. – PhilG Jan 25 '13 at 00:48
@JanDvorak, IDs should be unique and a context shouldn't be needed, http://stackoverflow.com/a/5611975/358906 – Nabil Kadimi Jan 25 '13 at 00:51
2

@NabilKadimi - ignoring the fact that Jan was kidding, even with unique IDs you might sometimes want to select an element with a particular ID only if it is a descendent of a certain other element. – nnnnnn Jan 25 '13 at 00:54

score 1 · Answer 2 · answered Jan 25 '13 at 00:36

1

Do it like this:

jQuery("#MyGlink, #WIDlink").removeClass("underNavselected");

answered Jan 25 '13 at 00:36

Carlos Nuñez

470
1
3
12

score 1 · Answer 3 · answered Jan 25 '13 at 00:36

Change this:

  jQuery("#MyGlink", "#WIDlink").removeClass("underNavselected");

To this:

  jQuery("#MyGlink, #WIDlink").removeClass("underNavselected");

And similar in each place that you do that.

The selector should be a single string with commas in it. The way you had it jQuery will look for elements matching the first selector that are descendents of elements matching the second selector.

removeClass does not work

3 Answers3