Why is removeClass not working?

Question

I'm guessing this is really simple but it has been driving me insane! here is my jquery code below and here is my Fiddle

$("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected');
            $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover').siblings().removeClass('SiteIconHover');

           $("#HeaderSites").on('click', function () {

            $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
            $(this).children('#Site-icon-2').addClass('SiteIconHover2').siblings().removeClass('SiteIconHover2');

        });


$("#HeaderApps").on('click', function () {

            $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
            $(this).children('#Site-icon-3').addClass('SiteIconHover3').siblings().removeClass('SiteIconHover3');

        });

possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, May 18 '15 at 16:05
Have you tried debug it using browser developer tools? There must be a missing element there so you can't add or remove a class from ```undefined``` — Martin Valentino, May 18 '15 at 16:08
It's because you're trying to remove the class from siblings that don't exist. — thewatcheruatu, May 18 '15 at 16:09
i think i have solution, but can you explain what are trying to achieve ? — divy3993, May 18 '15 at 16:09
I'm trying to add and remove the SiteIconHover class - it adds fine but when clicking onto another it does not remove the class. — Zi_31, May 18 '15 at 16:14
It is much neater to use CSS (child/sibling selectors + pseudo classes) for the kind of task you are doing, no need to execute any JS at all. — user1514042, May 18 '15 at 16:16
Again, it's because you're using .siblings on an object that doesn't have siblings. You would have to go up to the parent of the site icon and then get its siblings and the children of those siblings. This is basically a /lot/ more complicated than you need it to be. I think you want something like [this](https://jsfiddle.net/xwg0Lv9d/3/). — thewatcheruatu, May 18 '15 at 16:19
@Ziggy can i alter your id's in code to class? Because i have better and too easy solution if i am allowed to use class instead id. — divy3993, May 18 '15 at 16:41

hopkins-matt · Accepted Answer · 2015-05-18T16:43:04.913

The issue is your are trying to find siblings of divs with no siblings. I have changed some of the CSS and JS. This should do what you want.

JS:

 $("#Headerhome").addClass('menuSelected').siblings().removeClass('menuSelected');
 $('#Headerhome').children('#Site-icon-1').addClass('SiteIconHover');

 $("#Headerhome").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-1').addClass('SiteIconHover');
 });

 $("#HeaderSites").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-2').addClass('SiteIconHover');
 });


 $("#HeaderApps").on('click', function () {

     $(this).addClass('menuSelected').siblings().removeClass('menuSelected');
     $('div').removeClass('SiteIconHover');
     $(this).children('#Site-icon-3').addClass('SiteIconHover');
 });

CSS: Updated

#Site-icon-1 {

    background-color:#000;
    width:25px;
    height:25px;
    float:left;
    margin-right:15px;
    margin-top:12px;
    margin-left:5px;
}

#Site-icon-1.SiteIconHover {
    background-color:#00a9ff;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-2 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-2.SiteIconHover {
    background-color:green;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-3 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-3.SiteIconHover {
    background-color:red;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Headerhome, #HeaderSites, #HeaderApps {

background: #254661;
font-weight: normal;
color: #eeeeee;
box-sizing: border-box;
outline: 0;
line-height:50px;
text-decoration: none;
font-size: 100%;
list-style: none;
width:240px;
height:50px;
display: block;
cursor: pointer;
margin-top: 2px;
margin-left:-20px;
margin-right:0px;
padding-left:20px;
font-family:'Segoe UI';

}

#HeaderSites.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#Headerhome.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#HeaderApps.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

DEMO: JSFiddle Updated

The icons need to be individual not all the same. – Zi_31 May 18 '15 at 16:28 — Zi_31, May 18 '15 at 16:28
Do you mean they need to be separate classes? – hopkins-matt May 18 '15 at 16:40 — hopkins-matt, May 18 '15 at 16:40
Now the three have separate CSS rules – hopkins-matt May 18 '15 at 16:43 — hopkins-matt, May 18 '15 at 16:43

gon250 · Answer 2 · 2015-05-18T16:31:45.190

1

I have improved your code. You can write less code.

Take a look below:

JS:

$(document).ready(function(){
    $('.item').on('click', function(){
        $('.item').removeClass('menuSelected');
        $('.item').children('div').removeClass('SiteIconHover');

        $(this).addClass('menuSelected');
        $(this).children('div').addClass('SiteIconHover');
    });
});

Also I have updated your code so you can take a look the changes in the style because you can have lees css code.

https://jsfiddle.net/gon250/xwg0Lv9d/6/

I hope it's helps.

edited May 18 '15 at 16:31

answered May 18 '15 at 16:27

gon250

3,405
6
44
75

The icons need to be individual not all the same. – Zi_31 May 18 '15 at 16:28
@Ziggy31 It's not efficient repit code.. so if you want the same style for multiple divs you must use a ``class``. Also in the javascript you have to use classes so you can write lees code and it's going to be much better. – gon250 May 18 '15 at 16:29
the icons will be different - i have used a background colour for example. But they will be different background images – Zi_31 May 18 '15 at 16:30
@Ziggy31 ok, you mean by default the first one. let me do a small change. – gon250 May 18 '15 at 16:30
@Ziggy31 here you have the demo: https://jsfiddle.net/gon250/xwg0Lv9d/6/ I have added the classes to the html by default and then the ``onclick`` change the style. – gon250 May 18 '15 at 16:32

score 0 · Answer 3 · answered May 18 '15 at 16:07

0

Try some this options mate , all of them in a way or another work maybe they can fit with what you are looking for

$("#item").removeClass();
$("#item").removeAttr('class');
$("#item").attr('class', '');

answered May 18 '15 at 16:07

Romero

53
5

Nash Vail · Answer 4 · 2015-05-18T16:55:59.617

You have lots and lots problems with your code, You need to improve the CSS as well, take a look at the fiddle, I tried to improve your code, hope it helps

JS Fiddle

I changed your js to the following

function selectMenu(toSelect) {
    toSelect.addClass('menuSelected').siblings().removeClass('menuSelected');
    toSelect.children().addClass('SiteIconHover');
    toSelect.siblings().children().removeClass('SiteIconHover');
}

selectMenu($("#Headerhome"));

$("#SideNav").on('click', function(event) {
    if(event.target.id !== 'SideNav')
        selectMenu($(event.target));
    event.stopPropagation();
});

score 0 · Answer 5 · answered May 18 '15 at 16:37

I have updated your code below:

$("#Headerhome").addClass('menuSelected');

$("#Headerhome").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#HeaderSites, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class');
        $(this).addClass('menuSelected');
        $('#Site-icon-1').addCass('SiteIconHover2');
    } else {
        $(this).removeAttr('class');
    }
});

$("#HeaderSites").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#Headerhome, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class');
        $(this).addClass('menuSelected');
        $('#Site-icon-2').addCass('SiteIconHover2');
    } else {
        $(this).removeAttr('class');
    }
});

$("#HeaderApps").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#Headerhome, #HeaderSites, #Site-icon-1, #Site-icon-2').removeAttr('class');
        $(this).addClass('menuSelected');
        $('#Site-icon-3').addCass('SiteIconHover3');
    } else {
        $(this).removeAttr('class');
    }
});

You can also check on Fiddle link here: https://jsfiddle.net/xwg0Lv9d/7/

Why is removeClass not working?

5 Answers5