Last updated: Oct 20, 2021
Check out my new book
The "removeClass is not a function" error occurs for multiple reasons:
removeClass(it's case sensitive).
Here is an example of how the error occurs.
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
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.
<!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
divwas declared, we wouldn't be able to access the element in our
Here is the code for the JS file.
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
removeClass method to remove the
blue class from it.
For example, if we had the following DOM elements:
<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
const box = $('.box'); console.log(box); // 👉️ [div.box, div.box, div.box] box.removeClass('blue');
removeClass methods removes the class from every DOM element that has a
class name of
removeClasscorrectly, as it is case sensitive.
If your code is ran before jQuery is loaded, you can't use any of the functionality jQuery provides in your code.