CODEWITHSUNDEEP
jquerycss
Tobias Kuess
Tobias Kuess

Reputation: 749

jQuery .removeClass() not working

I need to remove a CSS class from an text field since I want to change its background color. I need to change the color back later, so I have to add and remove classes to the field, depending on some data.

.addClass is working totally fine. The problem is that the original class is above the added, so the changes are not shown, but the class is added properly. I now try to remove the class which is above the added - but I cant remove any classes from my elements. Why is that? What am I doing wrong? Here's the code:

if(i.stadt=="T") {
    $("#stadtInput").removeClass("ui-input-text input");
    $("#stadtInput").removeClass("ui-input-search input");
    $("#stadtInput").addClass( 'textboxRight' );
} else {
    $("#stadtInput").addClass( 'textboxWrong' );
}

If I inspect the elements with Webdev-Tools of browser I can see that the textboxRight/textboxWrong class is added, but no class is removed. I already tried to remove all classes by .removeClass(), but that doesn't work either..

Upvotes: 35

Views: 101170

Answers (7)

esims
esims

Reputation: 420

I had this problem too. I soon discovered that it just didn't work for an svg element, so that gave me the clue to update my jQuery version (used 1.8.2). That solved the problem.

Upvotes: 0

Xfce4
Xfce4

Reputation: 567

Assume an array of elements:

var someElements = document.querySelectorAll('.someClass');

Didn't work: someElements[1].removeClass('.someClassToRemove');

Worked: $(someElements[1]).removeClass('.someClassToRemove');

So, maybe your issue was related with the object being an array or any incompatible type.

Upvotes: 0

Marco
Marco

Reputation: 49

I had a similar problem. It turned out jQuery was returning an array with just one item. Follow me here:

var jqueryObject = $("#prefix-" + itemNum); <-- this gave me an array of 1.

Instead of

jqueryObject.removeClass("some-class");

I needed

jqueryObject[0].removeClass("some-class");

Upvotes: 4

Patrick Mutuku
Patrick Mutuku

Reputation: 1175

Had this problem earlier on. Am no expert in jquery yet so I don't know if it behaves like css' specificity. My fix was to remove the class by using higher specificity. e.g Instead of using $(this).removeClass('acb'), try using higher specificity like $('#div1').children().first()

Upvotes: 3

sebasjimenez10
sebasjimenez10

Reputation: 79

I had the same issue when working on a rails app with the HAML templating gem as I included the # at the very beginning and it is not really needed. When I removed it, it started working.

Hope this helps! :)

Upvotes: 1

Svet
Svet

Reputation: 111

The next few lines works for me

var current = $(el).closest(".panel").find(".panel-collapse");
    if( $(current).hasClass("in") ) {
        setTimeout(function(){///workaround
            $(".panel-collapse").removeClass("in");
        }, 10);
    } else {
        $(current).addClass("in");
    }

Upvotes: 11

Alec Moore
Alec Moore

Reputation: 1175

I'm not sure if this will fit your specifications, but the jQuery attr() method will take two arguments and replace all of the classes with the class name your provide. This won't work if you have other classes that you want to keep on your element, but if not try:

    $("#stadtInput").attr("class", "textboxRight");

Upvotes: 33

Related Questions