There are many ways to remove a class from the body element using JavaScript. In this article, I will show two ways to help you through the built-in replace() and classList.remove() methods. To better understand these two methods, let me clarify them through some examples below.
Remove a class from the body element using JavaScript
Before doing this article, I will have to get the body element so we can remove a class from the body element. I will do it like this:
var element = document.querySelector('body');
or
var element = document.body;
Use splice() method
With the splice() method, I will remove it by putting the string of all class names into an array where each element is the name of each class in the body from which to get the address and use the splice() method to remove it.
To do this, we need to know the following methods:
className property
Syntax:
element.className
Example:
document.querySelector('body').className;
This method is used to get the className string of the body.
split() method
Syntax:
string.split(separator, limit)
Parameters:
- separator: A string used as a sign to cut the string. If not passed, it will return to the original string.
- limit: is the limit of the number of elements of the array containing the separated strings.
splice() method
Syntax:
array.splice(index, howmany, item1, ….., itemX)
Parameters:
- index: is the address of the element you want to remove.
- howmany: is the part number to try to remove.
- item1, ….., itemX: are the elements to be added.
I would use the above methods to remove a class from the body element as follows:
var element = document.querySelector('body'); function removeClassName(element, className) { var arrClass = element.className.split(" "); // [demo, demo-1, demo-2] // Remove a class from the body for (let index = 0; index < arrClass.length; index++) { if (arrClass[index] === className) { arrClass.splice(index, 1); } } // Add new string className element.className = arrClass.join(" "); return element.className; } console.log(removeClassName(element, "demo-1"));
Output:
demo demo-2
We see the demo-1 class has been removed from the body element. After we finish running the removeClassName function with these steps, we can see the steps and better understand how our program works.
Use classList.remove() method
classList.remove() method is used to remove a class from the body element directly from the classList property. This way will be shorter than above and save more resources.
Syntax:
domtokenlist.remove(token, …)
Parameter:
- token: The token(s) to remove from the list.
Example:
var element = document.querySelector('body'); element.classList.remove("demo-1"); console.log(element.className);
Output:
demo demo-2
After calling the classList property, we will receive a DOMTokenList, a list of classes in the element used to call the property from this list. We can use the remove method to remove a class from the body element by passing the parameter name of the element. Class I want to remove.
Summary
Of the two methods above, we should use the classList.remove() method to remove a class from the body element using JavaScript because it saves time. Try both ways and see how it works. Then, you will understand and remember it longer. I hope this article helps you and your program. Good luck.
Maybe you are interested:
- Set styles on the Body Element using JavaScript
- Insert an Element into the Body tag using JavaScript
- Add a class to the Body element using JavaScript

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css