jQuery removeClass function does not work

Question

I'm trying to remove an element's class on an event. I'm using jQuery library, and using the function removeClass to remove the element's class.

However, when inspecting the element's classes, the class I removed is not removed off the list. In order to inspect the element's classes, there is the following code-block:

console.log($zoomToolOBJ.attr('class'));
$zoomToolOBJ.removeClass('onTool');
console.log($zoomToolOBJ.attr('class'));

As I view the console, I do see onTool class in both console.log (means the class onTool was not removed).

Here is my code:

<!DOCTYPE html>
<html>

<head>
    <title>Ado designed</title>

    <style>
        .tools {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 8px;
            border-radius: 8px;
            box-shadow: 3px 3px 3px #c5c5c5,
                -3px 3px 3px #c5c5c5;
        }

        .toolIcon {
            cursor: pointer;
            transition: all .3s ease;
            height: 60px;
            width: 60px;
            padding: 15px;
            border-radius: 8px;
            fill: #4d4d4d;
        }

        .toolIcon:not(:last-child) {
            margin-bottom: 10px;
        }

        .toolIcon:hover {
            background-color: #008cba;
            fill: #FFF;
        }

        .onTool {
            background-color: #008cba;
            fill: #FFF;
        }
    </style>
</head>

<body>
    <div class="tools">
        <svg id="zoomTool" class="toolIcon onTool" viewBox="0 0 512 512">
            <path
                d="m289.8,200.2h-49.3v-49.3c0-11.3-9.1-20.4-20.4-20.4-11.3,0-20.4,9.1-20.4,20.4v49.3h-49.3c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h49.3v49.3c0,11.3 9.1,20.4 20.4,20.4 11.3,0 20.4-9.1 20.4-20.4v-49.3h49.3c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.2-20.4-20.4-20.4z" />
            <path
                d="m220.2,388.7c-92.9,0-168.2-75.2-168.2-168.1s75.3-168.1 168.2-168.1 168.1,75.3 168.1,168.1-75.3,168.1-168.1,168.1zm274.8,78l-113.3-113.3c29.7-36.1 47.6-82.4 47.6-132.8 0-115.5-93.6-209.2-209.2-209.2s-209.1,93.7-209.1,209.2 93.6,209.2 209.2,209.2c50.4,0 96.6-17.8 132.7-47.5l113.3,113.3c5.2,5.3 21.1,7.9 28.9,0 7.9-8 7.9-20.9-0.1-28.9z" />
        </svg>
        <svg id="vectorTool" class="toolIcon" viewBox="0 0 492.426 492.426">
            <polygon
                points="261.232,434.981 261.232,57.445 305.607,101.82 326.82,80.606 246.213,0 165.607,80.606 186.82,101.82 
                        231.232,57.408 231.232,435.019 186.82,390.606 165.607,411.82 246.213,492.426 326.82,411.82 305.607,390.606 " />
        </svg>
        <svg id="proportionsTool" class="toolIcon" viewBox="0 0 512 512">
            <path d="M504.843,72.607L439.386,7.15c-9.534-9.534-25.048-9.533-34.582,0L281.561,130.392c-3.086,3.087-3.086,8.089,0,11.176
                        c3.086,3.085,8.089,3.085,11.175,0L415.978,18.326c1.634-1.634,3.806-2.533,6.116-2.533s4.482,0.899,6.116,2.533l65.458,65.457
                        c1.633,1.633,2.533,3.805,2.533,6.116c0,2.31-0.9,4.482-2.533,6.115l-16.064,16.064L435.515,69.99
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.088,42.088l-18.353,18.353l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-42.089-42.09
                        c-3.085-3.084-8.089-3.086-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.089l-18.353,18.353l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.497,18.497l-15.526,15.526L255.1,179.203l14.45-14.451
                        c3.086-3.087,3.086-8.089,0-11.176c-3.086-3.085-8.089-3.085-11.175,0l-14.451,14.451L98.156,22.264
                        C88.018,12.126,74.539,6.543,60.202,6.543c-14.337,0.001-27.816,5.584-37.953,15.722C12.11,32.403,6.527,45.881,6.527,60.219
                        c0,14.337,5.583,27.816,15.721,37.954l145.765,145.765L7.157,404.797c-9.534,9.535-9.534,25.048,0,34.583l65.457,65.458
                        C77.232,509.456,83.373,512,89.905,512c6.532,0,12.673-2.544,17.291-7.162L268.054,343.98l11.457,11.457
                        c3.086,3.085,8.089,3.085,11.175,0c3.086-3.087,3.086-8.089,0-11.176l-15.814-15.814c-0.307-0.486-0.667-0.948-1.09-1.371
                        c-0.423-0.423-0.885-0.783-1.37-1.09L101.189,154.763l21.191-21.191l13.102,13.102c1.543,1.542,3.565,2.314,5.588,2.314
                        s4.045-0.772,5.588-2.314c3.086-3.087,3.086-8.089,0-11.176l-13.101-13.101l21.191-21.191l83.579,83.579
                        c0.003,0.004,0.006,0.007,0.01,0.011c0.004,0.004,0.007,0.006,0.011,0.01l88.081,88.081c0.218,0.288,0.45,0.57,0.713,0.833
                        s0.544,0.495,0.832,0.713l117.268,117.268l-21.191,21.191L305.735,294.576c-0.071-0.077-0.135-0.158-0.21-0.232l-47.182-47.183
                        c-0.078-0.078-0.163-0.146-0.243-0.22l-83.343-83.342c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176
                        l249.291,249.291l-21.192,21.191l-75.096-75.097c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176
                        l80.684,80.684c0.767,0.767,1.717,1.386,2.728,1.778l95.478,37.069c1.506,0.584,3.076,0.868,4.634,0.868
                        c3.342,0,6.624-1.308,9.073-3.759c3.591-3.593,4.721-8.973,2.88-13.707l-37.108-95.434c-0.392-1.008-1.011-1.96-1.777-2.725
                        L343.963,268.071l160.88-160.881C514.378,97.655,514.378,82.142,504.843,72.607z M256.882,332.805l-15.507,15.503l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.498l-18.353,18.353l-42.089-42.089
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.089l-18.353,18.353l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.497l-18.353,18.353l-18.498-18.498
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l18.498,18.498l-18.353,18.353l-42.089-42.089
                        c-3.086-3.085-8.089-3.085-11.175,0c-3.086,3.087-3.086,8.089,0,11.176l42.089,42.088l-16.064,16.064
                        c-1.634,1.634-3.806,2.534-6.116,2.534s-4.482-0.9-6.116-2.534l-65.457-65.458c-3.372-3.372-3.372-8.859,0-12.231l160.857-160.858
                        L256.882,332.805z M33.423,86.998c-14.766-14.766-14.766-38.792,0-53.558c14.766-14.767,38.792-14.767,53.558,0l24.976,24.976
                        l-53.558,53.558L33.423,86.998z M116.798,116.803c-0.002,0.002-0.004,0.003-0.005,0.005c-0.002,0.002-0.003,0.004-0.005,0.005
                        l-26.774,26.774l-20.439-20.439l53.558-53.558l20.439,20.439L116.798,116.803z M483.703,483.681l-77.864-30.229l47.601-47.601
                        L483.703,483.681z" />
        </svg>
        <svg id="colorsTool" class="toolIcon" viewBox="0 0 459 459">
            <path
                d="M229.5,0C102,0,0,102,0,229.5S102,459,229.5,459c20.4,0,38.25-17.85,38.25-38.25c0-10.2-2.55-17.85-10.2-25.5
                        c-5.1-7.65-10.2-15.3-10.2-25.5c0-20.4,17.851-38.25,38.25-38.25h45.9c71.4,0,127.5-56.1,127.5-127.5C459,91.8,357,0,229.5,0z
                        M89.25,229.5c-20.4,0-38.25-17.85-38.25-38.25S68.85,153,89.25,153s38.25,17.85,38.25,38.25S109.65,229.5,89.25,229.5z
                        M165.75,127.5c-20.4,0-38.25-17.85-38.25-38.25S145.35,51,165.75,51S204,68.85,204,89.25S186.15,127.5,165.75,127.5z
                        M293.25,127.5c-20.4,0-38.25-17.85-38.25-38.25S272.85,51,293.25,51s38.25,17.85,38.25,38.25S313.65,127.5,293.25,127.5z
                        M369.75,229.5c-20.4,0-38.25-17.85-38.25-38.25S349.35,153,369.75,153S408,170.85,408,191.25S390.15,229.5,369.75,229.5z" />
        </svg>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="lib/blowup.min.js"></script>

    <script>
        $(document).ready(() => {
            // Tool icons objects
            const $zoomToolOBJ = $('#zoomTool');
            const $vectorToolOBJ = $('#vectorTool');
            const $proportionsToolOBJ = $('#proportionsTool');
            const $colorsToolOBJ = $('#colorsTool');

            // Selected tool -- initiated with zoom tool
            let mode = 1;

            // Holder for the active tool element (if any)
            let $activeToolOBJ = $zoomToolOBJ;

            // Handlers for tool icon click event
            const zoomToolOnClick = () => {
                if (mode !== 1) {
                    if (!!$activeToolOBJ) {
                        $activeToolOBJ.removeClass('onTool');
                    }

                    $activeToolOBJ = $zoomToolOBJ;

                    mode = 1;
                    $zoomToolOBJ.addClass('onTool');
                    return;
                }

                mode = 0;
                $zoomToolOBJ.removeClass('onTool');
                $activeToolOBJ = null;
            }

            $zoomToolOBJ.on('click', zoomToolOnClick);
        });
    </script>
</body>

</html>

I can guarantee you that `removeClass()` works absolutely fine. If it's not working for you then there's either an issue in your logic, perhaps the flow isn't as you expect it to be, or an external script is amending the class after you remove it. To debug this I would suggest you strip the code down and test each condition independently. Either way, we cannot really be of any assistance given the code provided. — Rory McCrossan, Oct 04 '20 at 13:39
@Swati Check whether the variable is loaded with an element holder — Shalvi Muqta, Oct 04 '20 at 13:42
@RoryMcCrossan Of course this function works fine, the point with this question is to find why my code doesn't work fine with this function. As I wrote, I've printed the class list before the removal of the class and after, And in both prints the `onTool` class is there. — Shalvi Muqta, Oct 04 '20 at 13:44
Here's a Stackoverflow guide on [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). As @RoryMcCrossan said, I would suggest you to remove all unnecessary code for this issue. Then you could edit your code and make a html snippet so we can actually run it on SO. Debugging it like this is much harder than it would need to be — A_A, Oct 04 '20 at 13:46
In your edit you call `addClass()` right after `removeClass()`...? — Rory McCrossan, Oct 04 '20 at 14:01
@RoryMcCrossan What do you mean? The purpose is to add the class when clicking the tool and it is not active. And to remove the class when clicking the tool and it is active. The tool is active when `mode` = 1 — Shalvi Muqta, Oct 04 '20 at 14:04
@ShalviMuqta With "remove all unnecessary code" I meant all code that isn't necessary to reproduce the issue. Like the styling (except for the one class maybe), libraries apart from jquery, svgs, other html elements, etc. When all this is removed it is much easier for others to navigate and reason about the code. And you could easily make it as a Stackoverflow snippet so we could also try it out. (But I think the issue is already found by Baliga) — A_A, Oct 04 '20 at 14:06
Does this answer your question? [jQuery SVG, why can't I addClass?](https://stackoverflow.com/questions/8638621/jquery-svg-why-cant-i-addclass) — freedomn-m, Oct 04 '20 at 16:53

score 1 · Accepted Answer · answered Oct 04 '20 at 14:02

The problem appears to be with the version of jQuery that you are using. You are using a 2.x version, and this is a jQuery issue for SVG. It works with a 3.x version. Consider upgrading your jQuery version if it is possible. Also see this answer for additional information.

score 0 · Answer 2 · answered Oct 04 '20 at 13:51

I think the class is being removed but you are adding it straight back on again:

const zoomToolOnClick = () => {
                if (mode !== 1) {
                    if (!!$activeToolOBJ) {
                        $activeToolOBJ.removeClass('onTool');    // <----- removing class
                    }

                    $activeToolOBJ = $zoomToolOBJ;

                    mode = 1;
                    console.log($zoomToolOBJ.attr('class'));
                    $zoomToolOBJ.addClass('onTool');    // <----- adding it back on again
                    console.log($zoomToolOBJ.attr('class'));
                    return;
                }

                mode = 0;
                console.log($zoomToolOBJ.attr('class'));
                $zoomToolOBJ.removeClass('onTool');
                console.log($zoomToolOBJ.attr('class'));
                $activeToolOBJ = null;
            }

Do you mean to be returning from the function after the class is removed?

jQuery removeClass function does not work

2 Answers2