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

Question

而不是单独调用$("#item").removeClass()元素可能具有的每个类,是否有一个可以调用的函数从给定元素中删除所有CSS类？

jQuery和原始JavaScript都可以工作.

Answer 1

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

removeClass不带参数调用将删除所有项目的类.

您也可以使用(但不一定推荐,正确的方法是上面的方法):

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

如果你没有jQuery,那么这将是你唯一的选择:

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

Answer 2

如果没有指定任何特定内容,请挂起,不删除Class()默认删除所有类？所以

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

将自己做...

Answer 3

只需将className真实DOM元素的属性设置为''(无).

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

编辑:其他人说只是调用removeClass工作 - 我用谷歌JQuery游乐场测试了这个:http://savedbythegoog.appspot.com/？id = ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ...它的工作原理.所以你也可以这样做:

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

Answer 4

当然.

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

Answer 5

嘿,来找寻找类似的答案.然后它打了我.

删除特定类

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

假设元素有class ="class another-class"

Answer 6

最短的方法

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

不管你信不信，我喜欢使用原生 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 = '';

解决方案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

Answer 10

你可以试试看

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

如果必须访问不带类名的元素，例如必须添加新的类名，则可以执行以下操作：

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

我在我的projet中使用该功能来删除和添加html构建器中的类。祝好运。