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

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

jQuery和原始JavaScript都可以工作。

637697 次浏览
小开

当然了。

$('#item')[0].className = '';// ordocument.getElementById('item').className = '';
小开

只需将真正DOM元素的className属性设置为''（无）。

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

其他人说只调用removeClass就可以了——我用Google jQuery Playground测试了这个：http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM……它可以工作。所以你也可以这样做：

$("#item").removeClass();
小开
最佳答案 
$("#item").removeClass();

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

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

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

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

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

等一下，如果没有指定任何特定的内容，是否会默认删除所有类？所以

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

会自己做这件事…

小开

最短的方法

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

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

小开

我也有类似的问题。在我的案例中，在禁用的元素上应用了aspNet残疾人类，所有禁用的控件都有错误的颜色。所以，我使用jQuery在我想要的每个元素/控件上删除了这个类，现在一切正常，看起来很棒。

这是我删除aspNet的代码类：

$(document).ready(function () {
$("span").removeClass("aspNetDisabled");$("select").removeClass("aspNetDisabled");$("input").removeClass("aspNetDisabled");
});
小开

删除特定类：

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

假设元素有class="class anet-class"。

小开

您可以尝试：

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

如果您必须在没有类名的情况下访问该元素，例如您必须添加一个新的类名，您可以这样做：

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

我在我的项目中使用该函数来删除和添加超文本标记语言构建器中的类。

小开

由于并非所有版本的jQuery都是平等创建的，您可能会遇到与我相同的问题，这意味着调用$（“#Item”）. demveClass（）；实际上并没有删除该类（可能是bug）。

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

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

试试removeClass。

例如：

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>

小开

我喜欢使用原生JavaScript来做到这一点，信不信由你！

解决方案1：className

  1. 删除所有项目的所有类
const items = document.querySelectorAll('item');for (let i = 0; i < items.length; i++) {items[i].className = '';}
  1. 仅删除第一项的所有类
const item1 = document.querySelector('item');item1.className = '';

解决方案2：classList

// remove all class of all itemsconst items = [...document.querySelectorAll('.item')];for (const item of items) {item.classList.value = '';}
 // remove all class of the first itemconst items = [...document.querySelectorAll('.item')];for (const [i, item] of items.entries()) {if(i === 0) {item.classList.value = '';}}
 // orconst 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

小开

让我们用这个例子。也许你想让你网站的用户知道一个字段是有效的，或者需要通过更改字段的背景颜色来引起注意。如果用户点击重置，那么你的代码应该只重置有数据的字段，而不是费心遍历页面上的每个其他字段。

此jQuery过滤器将仅删除类“Highlight Criteria”具有此类的输入或选择字段。

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

提交答案