\n
You can also use (but it is not necessarily recommended. The correct way is the one above):
\n$("#item").removeAttr('class');\n$("#item").attr('class', '');\n$('#item')[0].className = '';\n
\nIf you didn't have jQuery, then this would be pretty much your only option:
\ndocument.getElementById('item').className = '';\n
\n","author":{"@type":"Person","name":"jimyi"},"upvoteCount":1701}}}Reputation: 267177
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.
Upvotes: 875
Views: 684936
Reputation: 12186
className
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
items[i].className = '';
}
const item1 = document.querySelector('item');
item1.className = '';
classList
// remove all class of all items
const items = [...document.querySelectorAll('.item')];
for (const item of items) {
item.classList.value = '';
}
// 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 = '';
jQuery ways (not recommended)
$("#item").removeClass();
$("#item").removeClass("class1 ... classn");
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Upvotes: 6
Reputation:
Try with removeClass
.
For instance:
var nameClass=document.getElementsByClassName("clase1");
console.log("after", nameClass[0]);
$(".clase1").removeClass();
var nameClass=document.getElementsByClassName("clase1");
console.log("before", nameClass[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clase1">I am a Div with class="clase1"</div>
Upvotes: 2
Reputation: 2159
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");
Upvotes: 7
Reputation: 598
You can just try:
$(document).ready(function() {
$('body').find('#item').removeClass();
});
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:
$(document).ready(function() {
$('body').find('#item').removeClass().addClass('class-name');
});
I use that function in my project to remove and add classes in an HTML builder.
Upvotes: 8
Reputation: 1087
Remove specific classes:
$('.class').removeClass('class');
Say if element has class="class another-class".
Upvotes: 13
Reputation: 6925
I had a similar issue. In my case, on disabled elements was applied that aspNetDisabled class and all disabled controls had wrong colors. So, I used jQuery to remove this class on every element/control I want and everything works and looks great now.
This is my code for removing aspNetDisabled class:
$(document).ready(function () {
$("span").removeClass("aspNetDisabled");
$("select").removeClass("aspNetDisabled");
$("input").removeClass("aspNetDisabled");
});
Upvotes: -2
Reputation: 198
$('#elm').removeAttr('class');
Attribute "class" will no longer be present in "elm".
Upvotes: 6
Reputation: 32740
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").removeClass();
Upvotes: 20
Reputation: 31201
$("#item").removeClass();
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 = '';
Upvotes: 1701
Reputation: 285
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");
}
});
Upvotes: 2
Reputation: 2583
The shortest method
$('#item').removeAttr('class').attr('class', '');
Upvotes: 9
Reputation: 9136
Hang on, doesn't removeClass() default to removing all classes if nothing specific is specified? So
$("#item").removeClass();
will do it on its own...
Upvotes: 131
Reputation: 39188
Of course.
$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
Upvotes: 15