如何使用 jQuery/JavaScript 刪除所有 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

等等，如果沒有指定任何特定內容，removeClass() 是否默認刪除所有類？ 所以

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

會自己做...

Answer 3

只需將真實 DOM 元素的className屬性設置為'' （無）。

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

其他人說，只是調用removeClass工作 - 我用 Google jQuery Playground 測試了這個： http : removeClass ...並且它有效。 所以你也可以這樣做：

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

你可以試試：

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

如果您必須在沒有類名的情況下訪問該元素，例如您必須添加一個新的類名，您可以這樣做：

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

我在我的項目中使用該函數在 HTML 構建器中刪除和添加類。

Answer 8

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

屬性“class”將不再出現在“elm”中。

Answer 9

由於並非所有版本的 jQuery 都是平等的，您可能會遇到我所做的相同問題，這意味着調用 $("#item").removeClass(); 實際上並沒有刪除該類（可能是一個錯誤）。

更可靠的方法是簡單地使用原始 JavaScript 並完全刪除 class 屬性。

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

Answer 10

我喜歡使用原生 JavaScript 來做到這一點，信不信由你！

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

2.  // Only remove all class of first item const item1 = document.querySelector('item'); item1.className = '';

jQuery 方式

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

2. $("#item").removeClass("class1 ... classn");

Answer 11

讓我們用這個例子。 也許您希望您網站的用戶知道某個字段是有效的，或者需要通過更改該字段的背景顏色來引起注意。 如果用戶點擊重置，那么您的代碼應該只重置有數據的字段，而不必費心遍歷頁面上的所有其他字段。

此 jQuery 過濾器將僅針對具有此類的輸入或選擇字段刪除類“highlightCriteria”。

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

Answer 12

嘗試使用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>

Answer 13

我有一個類似的問題。 就我而言，在禁用元素上應用了 aspNetDisabled 類，並且所有禁用的控件都有錯誤的顏色。 所以，我使用 jQuery 在我想要的每個元素/控件上刪除了這個類，現在一切正常，看起來很棒。

這是我刪除 aspNetDisabled 類的代碼：

$(document).ready(function () {

    $("span").removeClass("aspNetDisabled");
    $("select").removeClass("aspNetDisabled");
    $("input").removeClass("aspNetDisabled");

});