Remove one class javascript

Remove a CSS class using JavaScript.

This is a tutorial on how to remove a CSS class from an HTML element using JavaScript.

To do this, we can either use regular JavaScript or the jQuery library.

Removing a CSS class using regular JavaScript.

Firstly, let’s remove a CSS class using vanilla JavaScript, as importing external libraries isn’t always an option for everyone.

Take a look at the following CSS and HTML:

 .myClass  
This is an example piece of text.
 

Above, we created a CSS class called “myClass” and then attached it to a DIV element that has the ID “intro”.

In order to remove this class from our HTML element, we will need to reference the element by its ID and then remove the class using classList.remove():

//Get the DIV element. var div = document.getElementById('intro'); //Remove the CSS class using classList.remove() div.classList.remove('myClass');

In the JavaScript snippet above:

1. We retrieved our element from the HTML DOM by using the document.getElementById() method. In this case, the element that we want to modify is a div with the ID “intro”.
2. After we retrieved the element, we were able to remove the CSS class by using classList.remove().

Note that if the ID you are referencing does not exist inside the DOM, then the following error will be thrown:

Uncaught TypeError: Cannot read property ‘classList’ of null

This error occurs because document.getElementById() returns a null value if the element does not exist.

As a result, you should always check to see if the element exists before you attempt to dynamically remove CSS classes from it.

Internet Explorer 9 does not support the classList property.

Older versions of Internet Explorer do not support the classList property.

The property was introduced in IE10, but with limited support.

As a result, you might want to use the following solution if your app is used by visitors with older browsers:

//Get the DIV element. var div = document.getElementById('intro'); //Replace the class name with a blank string. var newCSS = div.className.replace(/\bmyClass\b/g, ""); //Overwrite the className property with our new CSS classes div.className = newCSS;

In the code above, we basically stripped out the class name that we wanted to remove and then replaced the className property.

However, this is not a perfect solution. If the element contains other CSS classes that contain the substring “myClass”, then that class name will be truncated:

If we try to remove the class “admin” using the solution above, we will end up with the following:

As you can see, all instances of the word “admin” have been removed from our class attribute. Now, we’re left with malformed class names.

If you need to be more precise, then you can split the class list up into an array and then loop through it, assigning every class except the CSS class that you want to remove to a new string:

//Get the DIV element. var div = document.getElementById('example'); //Split the class list up into an array. var classes = div.className.split(" "); //The class name we want to remove. var cssClassToRemove = 'admin'; //The string that will contain our new classList var newClassList = ""; //Do a for loop through our list of classes. for(i = 0; i < classes.length; i++) < if(classes[i] !== cssClassToRemove) < newClassList += classes[i] + " "; >> //Finally, overwrite the className property div.className = newClassList;

In the example above, we simply rebuilt the class list and omitted the class name that we wanted to remove. This is a simple and accurate solution. It also provides good support for older browsers.

Remove a CSS class with jQuery.

If you are already using the jQuery library in your application, then you can simply use the following example:

//Remove a CSS class using jQuery's removeClass() method. $('#example').removeClass('admin');

As you can see, removing a class with jQuery is pretty straightforward. All we had to do was reference the element and then call the removeClass() method. Nice and concise!

Источник

How TO — Remove a Class

Learn how to remove a class name from an element with JavaScript.

Remove Class

Step 1) Add HTML:

In this example, we will use a button to remove the «mystyle» class from the element with :

Example

Step 2) Add CSS:

Style the specified class name:

Example

Step 3) Add JavaScript:

Get the element with and remove the «mystyle» class from it:

Example

function myFunction() <
var element = document.getElementById(«myDIV»);
element.classList.remove(«mystyle»);
>

Tip: Also see How To Toggle A Class.

Tip: Also see How To Add A Class.

Tip: Learn more about the classList property in our JavaScript Reference.

Tip: Learn more about the className property in our JavaScript Reference.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

2 Ways JavaScript Remove Class From The Elements

In this article, we will discuss how javascript remove class in 2 different ways. We will also look at different approaches for this with various real life examples.

First of all, why do we need to remove the class from the elements?

Imagine a simple game of jumping a ball. When you click on the ball, it will stop jumping. So in this situation, you simply need to remove the class jumping from the ball.

There are many other situations where you need to remove the class from the elements. For example, remove the class active from the element.

Click the button below to stop the ball from jumping.

When you click the button javascript will remove the class jump from the ball and the ball will stop jumping.

Remove class JavaScript

There are two ways to remove the class from the elements using JavaScript:

1. Remove class using classList.remove() method

The classList property is an object that contains the list of classes of the element.

The classList property has a remove() method that can be used to remove a class from the element.

The syntax of the classList.remove() method is:

element.classList.remove('class-name');

The class-name is the name of the class that you want to remove from the element.

The classList.remove() method will remove the class from the element and it will return true if the class is removed successfully and false if the class is not removed.

The following example will remove the class active from the div element.

// selecting the div element let div = document.getElementById('div'); // removing the class div.classList.remove('active');

2. Remove class using className property

The className property is a string that contains the list of classes of the element.

This is a read and write property. This means it can be used to read and the list of classes of the element.

You can assign a new class list to the className property of an element. It overwrites the existing class list.

Let’s see how you can use this to remove class.

Case 1 : Only one class is there attached to the element.

If you have only one class in the class list then just an empty string ( » ) to it and the class will be removed by overwriting the class with an empty string.

// selecting the element let element = document.getElementById('box'); // removing the class element.className = '';

Case 2 : More than one class is there attached to the element.

The real trick is to remove one class from multiple classes with the className property.

For this, you can use the replace string method and replace the desired class with an empty string and assign the new class list to the className property of the element.

// selecting the element let element = document.getElementById('box'); // removing the class // let the class to remove be 'class1' element.className = element.className.replace('class1', ''); // this will remove 'class1' from List // and set rest class to the element again

JavaScript remove class if exists

We have seen above classList.remove() method return true if the class is removed successfully and false if the class is not removed. We can use these return values to take some action if the class is removed.

But here we want to remove the class if it exists. So we must first check if the class exists before removing it.

To check if the class exists we can use the classList.contains() method. It returns true if the class exists and false if the class does not exist.

The syntax of the classList.contains() method is:

element.classList.contains('class-name');

Let’s see an example of it.

// selecting the element let ball = document.getElementById('ball'); if(ball.classList.contains('jump')) < // remove the class ball.classList.remove('jump'); >

Remove class from all elements javascript

To remove the class from all elements you can select all elements and use the classList.remove() method on all of them using a loop.

// selecting all elements let items = document.querySelectorAll('.items'); // Using forEach loop items.forEach(function(item) < item.classList.remove('active'); >);

onclick add class and remove class javascript

There are 2 ways to add and remove class using onclick event using the same button.

1. The first way is to check class. If the class exists then remove it and if the class does not exist then add it.
2. The second way is to use classList.toggle() method. It adds the class if it does not exist and removes the class if it exists.

Let’s see an example of the first way.

function addRemoveClass() < // selecting the element let element = document.getElementById('box'); // checking if the class exists if(element.classList.contains('active')) < // remove the class element.classList.remove('active'); >else < // add the class element.classList.add('active'); >>

Let’s see an example of the second way.

Conclusions

We have seen 2 ways how javascript remove class. Also, we have seen how to remove the class from multiple classes and how to remove a class if it exists.

Now we can also toggle classes in 2 different ways. The first way is to check class. If the class exists then remove it and if the class does not exist then add it and the second way is to use classList.toggle() method.

Frequently Asked Questions

1. How do you remove a class? To remove a class you can simply use the classList.remove() method.
2. How do you add and remove classes using JS? To add and remove classes using JS you can use the classList.add() and classList.remove() methods.

Источник