web-dev-qa-db-ja.com

JQuery/JavaScriptを使用してすべてのCSSクラスを削除する方法

要素が持つかもしれないすべての単一クラスに対して個別に$("#item").removeClass()を呼び出す代わりに、与えられた要素からすべてのCSSクラスを削除することができる単一の関数がありますか？

JQueryと生のJavaScriptの両方が機能します。

javascriptjquerydom
729
Click Upvote
$("#item").removeClass();

パラメータなしでremoveClassを呼び出すと、アイテムのすべてのクラスが削除されます。

あなたはまた使うことができます（しかし必ずしも推奨されるわけではありません、 正しい 方法は上のものです）：

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

あなたがjQueryを持っていなかったなら、これはほとんどあなたの唯一の選択肢でしょう：

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

何も指定しないとremoveClass（）はデフォルトですべてのクラスを削除しませんか。そう

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

独自にそれを行います...

111
da5id

もちろん。

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

実際のDOM要素のclassName属性を''に設定するだけです（何もしません）。

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

編集： removeClassを呼び出すだけでうまくいくと言う人もいます - http://savedbythegoog.appspot.com/?id=ag5zYXzlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEMでこれをテストしました ...それそれ動作します。だからあなたはまた、このようにそれを行うことができます：

$("#item").removeClass();
13
Isaac Waller

ええと、同様の答えを探しています。それからそれは私を襲った。

特定のクラスを削除

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

要素がclass = "class another-class"であるとします

9
Shawn Rebelo

最短の方法

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

あなたはただ試すことができます

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

クラス名を指定せずにその要素にアクセスする必要がある場合、たとえば新しいクラス名を追加する必要がある場合は、次のようにします。

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

私は私のプロジェクトでその機能を使用して、htmlビルダーのクラスを削除して追加します。がんばろう。

4
Alessandro Foolish Ciak DAnton
$('#Elm').removeAttr('class');

class attrは「Elm」に存在しなくなりました。

4
uihelp

私はネイティブのjsを使うのが好き、信じられないかもしれません！

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");

2
xgqfrms

すべてのバージョンのjQueryが同じように作成されているわけではないので、$（ "＃item"）を呼び出すことを意味する同じ問題に遭遇するかもしれません。実際にはクラスを削除しません。 （おそらくバグ）

より信頼できる方法は、単純に生のJavaScriptを使用してクラス属性を完全に削除することです。

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

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 Div with class="clase1"</div>
1
x-rw

この例を使ってみましょう。たぶんあなたはあなたのウェブサイトのユーザーにフィールドが有効であることを知ってほしいか、それはフィールドの背景色を変えることによって注意を必要とします。ユーザーがresetを押した場合、コードはデータを持つフィールドのみをリセットし、ページ上の他のすべてのフィールドをループ処理しなくてもすみます。

このjQueryフィルタは、このクラスを持つ入力フィールドまたは選択フィールドについてのみ、クラス "highlightCriteria"を削除します。

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