Solution To Remove A Class From The Body Element Using JavaScript

Posted on by Tom Joseph
Remove a class from the Body element using JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *