如何使用jQuery/JavaScript删除所有CSS类？

Question

有没有一种可以调用单个函数，从给定的元素中删除所有CSS类，而不是针对元素可能具有的每个类分别调用 $（“#item”）.removeClass（）的方法？

jQuery和原始JavaScript都可以使用。

- Ali

Answer 1

$("#item").removeClass();

如果不传递参数调用removeClass，将会移除元素的所有类。

---

您也可以使用以下方式（但并不一定推荐。上面的方法才是正确的）：

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

如果您没有jQuery，那么这几乎是您唯一的选项：

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

- jimyi

---

уј░тюет║ћУ»ЦСй┐ућеprop()уЅѕТюгУђїСИЇТў»attr()тљЌ№╝Ъ - Mike

在1.11.1版本中，调用removeClass()而不带参数似乎不再起作用了。 - Vincent

似乎是jQuery引入的一个bug，因为他们的文档明确指出：如果参数中包含类名，则只会从匹配元素集中删除该类。如果参数中没有指定类名，则会删除所有类。详情请参阅https://api.jquery.com/removeclass/ - AtheistP3ace

是的，我也怀疑这是一个错误，而不是设计上的问题。同时，以下纯JavaScript代码可以正常工作。document.getElementById("item").removeAttribute("class"); - Vincent

jQuery UI 1.9 存在一个问题。如果 removeClass() 无法正常工作，请使用 removeAttr('class')。 - Milad

Answer 2

等一下，removeClass()默认情况下不是会删除所有类（如果没有指定特定的类）吗？

$("#item").removeClass();

它会自动完成...

- da5id

---

是的："从匹配元素集合中删除所有或指定的类。" - da5id

现在已经被记录得很好了：如果参数中没有指定类名，则会删除所有类。 - user

Answer 3

只需将真实DOM元素的className属性设置为''（空）即可。

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

其他人已经说过，只需要调用removeClass就可以了 - 我在Google jQuery Playground上测试过了：http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... 真的可以这样做：

$("#item").removeClass();

- Isaac Waller

Answer 4

当然可以。

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

- kangax

Answer 5

移除特定的类：

$('.class').removeClass('class');

判断元素是否有 class="class another-class" 这个类。

- Shawn Rebelo

---

最后一句话似乎不可理解。你能修复它吗？ - Peter Mortensen

Answer 6

最短的方法

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

- Yanni

Answer 7

您可以尝试以下操作：

$(document).ready(function() {
   $('body').find('#item').removeClass();
});

如果你需要访问没有类名的元素，例如你需要添加一个新的类名，你可以这样做：

$(document).ready(function() {
   $('body').find('#item').removeClass().addClass('class-name');
});

我在我的项目中使用该函数来删除和添加HTML构建器中的类。

- Alessandro Foolish Ciak DAnton

Answer 8

由于jQuery的版本不同，您可能会遇到与我相同的问题，这意味着调用$("#item").removeClass();实际上并没有删除该类（可能是一个错误）。

更可靠的方法是简单地使用原始JavaScript，并完全删除类属性。

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

- Vincent

Answer 9

$('#elm').removeAttr('class');

“elm”中将不再存在属性“class”。

- uihelp

---

这是对我有效的方法。removeClass(); 对我没用。 - kneidels

Answer 10

我喜欢使用纯JavaScript来做这件事，信不信由你！

解决方案1：className

1. 移除所有项目的所有类

const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
  items[i].className = '';
}

2. 仅移除第一个项目的所有类

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) {
   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的方法（不建议使用）

1. $("#item").removeClass();

2. $("#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

- xgqfrms