Coding Beauty Tutorial

How to Remove All CSS Classes Using jQuery/JavaScript

To remove all CSS classes, you can either use the jQuery methods or JavaScript properties.

The removeClass() Method

The most used method to remove all item’s classes is the removeClass() jQuery method. This method removes a single, multiple or all classes from each element in the set of matched elements. If a class name is specified as a parameter, only that class will be removed from the set of matched elements. If no class names are defined in the parameter, all classes will be removed.

html> html> head> title>Title of the document title> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> style> .green < color: green; > .blue < color: blue; > style> head> body> p class="green">First paragraph. p> p class="blue">Second paragraph. p> button id="buttonId">Remove classes button> script> $(document).ready(function( ) < $("#buttonId").click(function( ) < $("p").removeClass(); >); >); script> body> html>

The .removeAttr() Method

The .removeAttr() method uses the removeAttribute() JavaScript function, but it is can be invoked directly on a jQuery object.

html> html> head> title>Title of the document title> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> head> body> a href="#">Link a> button type="button" class="remove-attr"> Remove Link button> script> $(document).ready(function( ) < $(".remove-attr").click(function( ) < $("a").removeAttr("href"); >); >); script> body> html>

The .attr() method

If you set the class attribute to empty will remove all classes from the element but also leaves an empty class attribute on the DOM. The .attr() jQuery method gets the attribute value for the first element in the set.

html> html> head> title>Title of the document title> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> head> body> button type="button" class="add-attr">Select Checkbox button> input type="checkbox"> script> $(document).ready(function( ) < $(".add-attr").click(function( ) < $('input[type="checkbox"]').attr("checked", "checked"); alert('Checked!'); >); >); script> body> html>

The JavaScript className Property

You can use only pure JavaScript. Set the className attribute to empty which will set the value of the class attribute to null:

document.getElementById('element').className = '';

html> html> head> title>Title of the document title> style> .addStyle < width: 500px; background-color: yellow; color: red; text-align: center; font-size: 20px; > style> head> body> div id="divId"> h1>W3Docs h1> div> button onclick="myFunction()">Click on button button> script> function myFunction( ) < document.getElementById("divId").className = "addStyle"; > script> body> html>

The className property returns the class name of an element.

Related Resources

Источник

How to Remove All Classes From an Element With JavaScript

To remove all classes from an element in JavaScript, set the className property of the element to an empty string ( » ), i.e., element.className = » . Setting the className property to an empty string will eliminate every class in the element.

const box = document.getElementById('box'); // 👇 Remove all classes from element. box.className = ''; 

    .class-1 < height: 30px; width: 300px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; >.class-2  
 
   

This JavaScript code will remove all classes from the input field when the button is clicked:

const btn = document.getElementById('btn'); const input = document.getElementById('input'); btn.addEventListener('click', () => < input.className = ''; >); 

The className property is used to get and set the value of the class attribute of a specified element.

Setting className to an empty string effectively removes all the classes from the element.

Remove all classes from element with removeAttribute() method

To remove all classes from an element with this approach, call the removeAttribute() method on the specified for the class attribute, i.e., element.removeAttribute(‘class’) . This method will remove the class attribute from the element, effectively removing all the element’s classes.

const box = document.getElementById('box'); // 👇 Remove all classes from element box.removeAttribute('class');

removeAttribute() takes a name and removes the attribute from an element with that name.

    .class-1 < height: 30px; font-size: 1.1em; box-shadow: 0 2px 3px #c0c0c0; >.class-2  Download 
 
   

This JavaScript code will remove all classes from the styled button when the other button is clicked.

const btn = document.getElementById('btn'); const styledButton = document.getElementById('styled-btn'); btn.addEventListener('click', () => < styledButton.removeAttribute('class'); >); 

In the first method, the class attribute remains on the element after setting the className property. But using the removeAttribute() method completely removes the class attribute from the element.

If the element doesn’t have a class attribute, removeAttribute() will return without causing an error.

Either of these two methods is fine, it’s up to you which one to pick. I think using the className property is better because it more clearly shows what you’re trying to do.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

Источник

How can I remove all CSS classes using jQuery/JavaScript?

Instead of individually calling $(«#item»).removeClass() for every single class an element might have, is there a single function which can be called which removes all CSS classes from the given element? Both jQuery and raw JavaScript will work.

13 Answers 13

Calling removeClass with no parameters will remove all of the item’s classes.

You can also use (but it is not necessarily recommended. The correct way is the one above):

$("#item").removeAttr('class'); $("#item").attr('class', ''); $('#item')[0].className = ''; 

If you didn’t have jQuery, then this would be pretty much your only option:

document.getElementById('item').className = ''; 

@Vincent Seems like a bug introduced in jQuery since their documentation explicitly states this: If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed. api.jquery.com/removeclass

Yes, I also suspect it’s a bug, and not by design. In the meantime, the following pure JavaScript works just fine. document.getElementById(«item»).removeAttribute(«class»);

Hang on, doesn’t removeClass() default to removing all classes if nothing specific is specified? So

Now it is documented properly: If no class names are specified in the parameter, all classes will be removed.

Just set the className attribute of the real DOM element to » (nothing).

$('#item')[0].className = ''; // the real DOM element is at [0] 

Other people have said that just calling removeClass works — I tested this with the Google jQuery Playground: http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM . and it works. So you can also do it this way:

$('#item')[0].className = ''; // or document.getElementById('item').className = ''; 

Say if element has another-class».

$('#item').removeAttr('class').attr('class', ''); 

If you have to access that element without a class name, for example you have to add a new class name, you can do this:

I use that function in my project to remove and add classes in an HTML builder.

Attribute «class» will no longer be present in «elm».

Since not all versions of jQuery are created equal, you may run into the same issue I did, which means calling $(«#item»).removeClass(); does not actually remove the class (probably a bug).

A more reliable method is to simply use raw JavaScript and remove the class attribute altogether.

document.getElementById("item").removeAttribute("class"); 

I like using native JavaScript to do this, believe it or not!

solution 1: className

const items = document.querySelectorAll('item'); for (let i = 0; i

const item1 = document.querySelector('item'); item1.className = ''; 

solution 2: classList

// remove all class of all items const items = [. document.querySelectorAll('.item')]; for (const item of items)

 // remove all class of the first item const items = [. document.querySelectorAll('.item')]; for (const [i, item] of items.entries()) < if(i === 0) < item.classList.value = ''; >> 

 // or const item = document.querySelector('.item'); item.classList.value = ''; 

refs

Let’s use this example. Maybe you want the user of your website to know a field is valid or it needs attention by changing the background color of the field. If the user hits reset then your code should only reset the fields that have data and not bother to loop through every other field on your page.

This jQuery filter will remove the class «highlightCriteria» only for the input or select fields that have this class.

$form.find('input,select').filter(function () < if((!!this.value) && (!!this.name)) < $("#"+this.id).removeClass("highlightCriteria"); >>); 

Источник

Clear element.classList

I’m not aware of a «method» in the sense of a «function» associated with classList . It has .add() and .remove() methods to add or remove individual classes, but you can clear the list in the sense of removing all classes from the element like this:

When I try element.classList = «» in Safari (Version 9.1.1), I get an error: TypeError: Attempted to assign to readonly property.

@NeilMasters — className can be set, and that was true in ECMA 5 too and worked in older IE. Note the difference between className and classList .

unless I’m making a mistake, this can’t be used on SVG nodes, at least in firefox. className is read-only. This works: node.setAttributeNS(null, ‘class’, »)

With ES6 and the spread operator, this is a breeze.

element.classList.remove(. element.classList); 

This will spread the list items as arguments to the remove method.
Since the classList.remove method can take many arguments, they all are removed and the classList is cleared.

Even though it is readable it is not very efficient. @Fredrik Macrobond’s answer is faster.
View different solutions and their test results at jsperf.

var classList = element.classList; while (classList.length > 0)

jsperf.com/classname-vs-classlist-for-clear — on my box, it’s the fastest solution on IE10/11 (and probably on Edge too)

Here’s another way to do it:

IMO this is the proper way to do it, because other methods won’t show the change in the «Elements» tab on browser’s Developer Tools, but this one does.

Nowadays, classList is preferred to (remove|set)Attribute or className . Pekaaw’s answer above is good, 1 similar alternative is to set the DomTokenList.value

Another option is to simply remove the class attribute:

@JoshuaDance While it may be that, perhaps the poster needs the attribute, in which it’d just be faster to simply set the attribute, correct?

I recommend not using className as classList could result in faster DOM updates.

The remove() method of DOMTokenList (which is what classList is) can take multiple arguments — each a string of a classname to remove (reference). First you need to convert the classList to a plan array of classnames. Some people use Array.prototype.slice() to do that, but I’m not a fan and I think a for loop is faster in most browsers — but either way I have nothing against for loops and the slice often feels like a hack to me. Once you have the array you simply use apply() to pass that array as a list of arguments.

I use a utility class I wrote to accomplish this. The first method is the one you are looking for, but I’m including slightly more for your reference.

ElementTools.clearClassList = function(elem) < var classList = elem.classList; var classListAsArray = new Array(classList.length); for (var i = 0, len = classList.length; i < len; i++) < classListAsArray[i] = classList[i]; >ElementTools.removeClassList(elem, classListAsArray); > ElementTools.removeClassList = function(elem, classArray) < var classList = elem.classList; classList.remove.apply(classList, classArray); >; ElementTools.addClassList = function(elem, newClassArray) < var classList = elem.classList; classList.add.apply(classList, newClassArray); >; ElementTools.setClassList = function(elem, newClassArray) < ElementTools.clearClassList(elem); ElementTools.addClassList(elem, newClassArray); >; 

Please note that I have not thoroughly tested this in all browsers as the project I am working on only needs to work in a very limited set of modern browsers. But it should work back to IE10, and if you include a shim (https://github.com/eligrey/classList.js) for classList, it should work back to IE7 (and also with SVGs since Eli Grey’s shim adds support for SVG in unsupported browsers too).

An alternative approach I considered was to loop backwards through the classList and call remove() on classList for each entry. (Backwards because the length changes as you remove each.) While this should also work, I figured using the multiple arguments on remove() could be faster since modern browsers may optimize for it and avoid multiple updates to the DOM each time I call remove() in a for loop. Additionally both approaches require a for loop (either to build a list or to remove each) so I saw no benefits to this alternative approach. But again, I did not do any speed tests.

If somebody tests speeds of the various approaches or has a better solution, please post.

EDIT: I found a bug in the shim which stops it from correctly adding support to IE11/10 for multiple arguments to add() and remove() . I have filed a report on github.

Источник