The class attribute allows you to group several elements (tags), thus helping to manage or change them altogether in the future. It’s widely used for the items that are repeated on the page as it helps to avoid writing the same code several times.
Sometimes you may need to get rid of a class, remove it or delete its name. You can use it by means of the built-in classList property which contains a pseudo-array of the element’s CSS classes and has special methods for adding the new classes or removing them.
In order to remove a specific class you can use the classList.remove() method. Below is its correct syntax.
element.classList.remove('ClassName');How to use the remove() method
A single element may have only one id but several classes. Using the remove() method you can delete some or all of them. For example, let’s create an item belonging to three different classes. You can get access to it with the help of the querySelector() method. Then let’s remove the first class and print the rest of them to the console.
In the following code you can see how easy it is to remove one of the classes using the remove() method.
<p id="item" class="first second third"></p>
<script>
const item = document.querySelector("#item");
item.classList.remove("first");
let classNames = item.classList;
console.log(classNames); // logs "DOMTokenList(2) ['second', 'third', value: 'second third']"
</script>You can take as many class names as you wish and pass them all as arguments. The method will remove all of them in this case. Just separate them with a comma as illustrated in the example below where two classes are removed at the same time.
item.classList.remove("first", "second");
classNames = item.classList;
console.log(classNames); // logs "DOMTokenList(1) ['third', value: 'third']"Furthermore, you can even remove all the classes of your element. In this case the Token List will contain zero elements and it is equivalent to class=“”.
item.classList.remove("first", "second", "third");
classNames = item.classList;
console.log(classNames); // logs "DOMTokenList(0) [value: '']"The remove() method can only accept strings as arguments and does not work with indexes. Thus, if you decide to use a number as a parameter, the method will not recognize what specific class you are looking for and will not perform any actions.
No exception messages will be thrown. In case you pass a string with the name of a non-existing class, nothing will happen either. Keep in mind, early versions of Internet Explorer (before 10) do not support the classList property.
Removing a class with the toggle() method
Another way to remove the class from the element is using the toggle() method which can be called through the classList property as well. The syntax is very similar.
const item = document.querySelector("#item");
item.classList.toggle("first");
const classNames = item.classList;
console.log(classNames); // logs "DOMTokenList(2) ['second', 'third', value: 'second third']"However, there is one major difference between the toggle() and remove() methods. The latter checks whether the element belongs to the class specified and if it does, the method performs its removal, otherwise nothing else happens. At the same time, the toggle() method also checks if there is a class matching the argument, but if it cannot find any, the new class with the specified name will be created.
In the example below there is an element belonging to three classes. When you use the remove() method in order to delete a non-existing class, nothing happens and the Token List remains the same. On the contrary, after using the toggle() method a new class is added to the list.
<p id="item" class="first second third"></p>
<script>
const item = document.querySelector("#item");
item.classList.remove("fourth");
console.log(item.classList); // logs "DOMTokenList(3) ['first', 'second', 'third', value: 'first second third'"
item.classList.toggle("fourth");
console.log(item.classList); // logs "DOMTokenList(4) ['first', 'second', 'third', 'fourth', value: 'first second third fourth"
</script>Note, that this method can work with one class name at the same time only, and will not perform any actions if you pass several strings as arguments.
If you wish to remove the class without a risk of creating a new one using the toggle() method, you can resort to a small trick. The thing is that it has one optional parameter - the force specified by a boolean value. If it’s set to true, the new class will be added but nothing will be removed. In case you set it to false, no new classes will be added and only removal can be possible.
This way of removing a class is illustrated in the following code where the new class is not added because of the false value passed as a second parameter.
item.classList.toggle("fourth", false);
console.log(item.classList); // logs "DOMTokenList(3) ['first', 'second', 'third', value: 'first second third']"The drawback of this method is the low support by web browsers. For example, you can use the toggle() method in Google Chrome beginning from its 8th version while the force parameter will not work until its 24th version. The browsers not compatible with the force argument will just ignore it and remove or create a class depending on its existence in the list without any exceptions.
Conclusion
JavaScript offers flexible tools for managing the classes of elements. For example, you can easily delete one or several classes using the classList.remove() method. Another way to do it is by using the classList.toggle() method which allows you not only to delete the certain class but also to create a new one. However, pay attention to the compatibility, as some old web browser versions may not support these features.