Javascript remove class
In this article, we will take a look at different ways to remove a CSS class or all classses from an element in javascript, typescript and jQuery dynamically.
An element in javascript can be accessed using its id with
getElementById() of document object.This element has a
className property which refers to the CSS class in HTML DOM. For this example, the HTML is as below
<html>
<head>
<style>
.red{ color:red }
</style>
<body>
<div id="ele">Remove Class with javascript</div>
</body>
</html>
Assigning className property to empty string removes all the classes assigned to the element.
Below javascript code selects the div using its id and removes all CSS classes from it.
<script>
document.getElementById('ele').className = '';
</script> This code will work with javascript and typescript as well.
Method 2: Using classList property
CSS class can also be removed to an element using its classList property. This property is a read only property which returns a list of CSS classes applied to an element.
In order to remove a class, use remove() method providing it the class name as argument. Example,
<script>
document.getElementById('ele').classList.remove('red');
</script> Javascript
removeAttribute() method of an element takes attribute name as argument and removes this attribute from the element. CSS class over an element is applied with class attribute. To remove class from an element, use removeAttribute() method with ‘class’ as argument. Example,
<script>
document.getElementById('ele').removeAttribute('class');
</script> removeAttribute() removes all the classes from an element.
Method 4: Using jQuery removeClass()
removeClass() method from jQuery takes the name of class as argument and removes this class from element.
Select an element with jQuery using its id and call removeClass() method with the name of class to be removed. Example,
<script>
$('#ele').removeClass('e');
</script> To remove Multiple classes from an element with removeClass(), provide all the classes separated by a space as shown below
<script>
$('#ele').removeClass('e red');
</script> To remove a CSS class from multiple elements at once, select multiple elements and invoke removeClass() as shown below.
<script>
$('.e').removeClass('red');
</script> Note that multiple elements are selected using .(dot) selector with class name.
Method 5: Using jQuery removeAttr()
jQuery removeAttr() method removes an attribute from the element. This attribute is supplied as argument to removeAttr().
CSS classess are applied with class attribute. So, to remove a class, provide ‘class’ to removeAttr(). Example,
<script>
$('#ele').removeAttr('class');
</script> To remove a class from multiple elements, select the elements with jQuery class selector as shown below.
<script>
$('.ele').removeAttr('class');
</script> jQuery
attr() method takes two arguments.1. Name of attribute.
2. Value of that attribute to apply to elements.
To remove CSS class from an element, set its class attribute to an empty value as shown below.
<script>
$('#ele').attr('class', '');
</script> This will remove all classes applied to an element. So, you can use it to remove multiple classes at once.
For removing CSS class from multiple elements, select all elements using their class selector and set their class attribute to empty. Example,
<script>
$('.ele').attr('class', '');
</script> Remove class from multiple elements with javascript
Suppose we want to remove a class from multiple div elements at once. For this, select all div elements using javascript document.querySelector() method passing it the name of element.
It will return a collection of div elements. Iterate over these elements and use classList.remove() or className property to remove CSS classes.
Example,
// select all divs
let elements = document.querySelectorAll('div');
// iterate over divs
for(let ele of elements){
// remove class from each div
ele.classList.remove('e');
} Hope it was helpful.
