Solve - removeClass is not a function Error in JavaScript

avatar

Borislav Hadzhiev

Last updated: Oct 20, 2021

banner

Check out my new book

Solve - removeClass is not a function Error #

The "removeClass is not a function" error occurs for multiple reasons:

  • Calling the function on a value that is not a set of jQuery elements.
  • Misspelling removeClass (it's case sensitive).
  • Placing the JS script tag above the HTML code that declares the DOM elements.
  • loading jQuery multiple times on the same page.

typeerror removeClass is not a function

Here is an example of how the error occurs.

index.js
const box = document.getElementById('box'); // ⛔️ Uncaught TypeError: box.removeClass is not a function box.removeClass('blue');

We called the removeClass method on a DOM element and not a set of jQuery elements.

To solve the "removeClass is not a function" error, make sure to call the removeClass method on a set of jQuery elements and place your JS script tag at the bottom of the body tag, after the DOM elements have been declared and jQuery is loaded.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" class="blue">Box</div> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ Your JS script here ✅ --> <script src="index.js"></script> </body> </html>

Notice that we loaded jQuery and our own script (index.js) at the bottom of the body tag.

The order is important because had we loaded the scripts before the div was declared, we wouldn't be able to access the element in our index.js file.

Here is the code for the JS file.

index.js
const box = $('#box'); console.log(box); // 👉️ [div#box] // ✅ works box.removeClass('blue');

We used the jQuery function to select the element with an id of box and used the removeClass method to remove the blue class from it.

Had we selected multiple elements, e.g. using a class selector, we would remove the class from all of the matched elements.

For example, if we had the following DOM elements:

index.html
<div class="box blue">Box 1</div> <div class="box blue">Box 2</div> <div class="box blue">Box 3</div>

And selected the elements with a class of box:

index.js
const box = $('.box'); console.log(box); // 👉️ [div.box, div.box, div.box] box.removeClass('blue');

The removeClass methods removes the class from every DOM element that has a class name of box.

If the error persists, make sure you're spelling removeClass correctly, as it is case sensitive.

The order you load the scripts in is very important, you have to load the jQuery script only once and make sure it is loaded before your JavaScript code is ran.

If your code is ran before jQuery is loaded, you can't use any of the functionality jQuery provides in your code.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.