Bagaimana cara menghapus semua kelas CSS menggunakan jQuery / JavaScript?

778

Alih-alih secara individual memanggil $("#item").removeClass()setiap kelas yang mungkin dimiliki suatu elemen, adakah fungsi tunggal yang bisa disebut yang menghapus semua kelas CSS dari elemen yang diberikan?

Baik jQuery dan JavaScript baku akan berfungsi.

Klik Upvote
sumber

Jawaban:

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

Menelepon removeClasstanpa parameter akan menghapus semua kelas item.


Anda juga dapat menggunakan (tetapi tidak selalu disarankan, cara yang benar adalah yang di atas):

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

Jika Anda tidak memiliki jQuery, maka ini akan menjadi satu-satunya pilihan Anda:

document.getElementById('item').className = '';
jimyi
sumber
7
Bukankah seharusnya attr()versinya prop()sekarang?
Mike
7
Memanggil removeClass () tanpa parameter tampaknya tidak berfungsi lagi dalam versi 1.11.1
Vincent
1
@Vincent Sepertinya bug yang diperkenalkan di jQuery karena dokumentasi mereka secara eksplisit menyatakan ini: If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed. api.jquery.com/removeclass
AtheistP3ace
Ya, saya juga menduga itu bug, dan bukan karena desain. Sementara itu, JavaScript murni berikut berfungsi dengan baik. document.getElementById ("item"). removeAttribute ("class");
Vincent
1
Ada masalah dengan jQuery UI 1.9. Jika removeClass () tidak berfungsi gunakan removeAttr ('class')
Milad
119

Tunggu dulu, bukankah deleteClass () default untuk menghapus semua kelas jika tidak ada yang spesifik ditentukan? Begitu

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

akan melakukannya sendiri ...

da5id
sumber
3
yeah: "Menghapus semua atau kelas yang ditentukan dari kumpulan elemen yang cocok."
da5id
5
Sekarang sudah didokumentasikan dengan baik: Jika tidak ada nama kelas yang ditentukan dalam parameter, semua kelas akan dihapus.
pengguna
13

Tentu saja.

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

Heh, datang mencari jawaban yang sama. Lalu aku tersadar.

Hapus Kelas Tertentu

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

Katakanlah jika elemen memiliki class = "class another-class"

Shawn Rebelo
sumber
9

Metode terpendek

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

Anda bisa mencoba

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

Jika Anda harus mengakses elemen itu tanpa nama kelas, misalnya Anda harus menambahkan nama kelas baru, Anda bisa melakukannya:

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

Saya menggunakan fungsi itu di projet saya untuk menghapus dan menambahkan kelas dalam pembangun html. Semoga berhasil.

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

tidak lagi kelas attr akan hadir dalam "elm".

uihelp
sumber
inilah yang bekerja untuk saya. removeClass();tidak bekerja untuk saya.
kneidels
3

Saya suka menggunakan js asli lakukan ini, percaya atau tidak!

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 = '';

cara jQuery

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

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

xgqfrms
sumber
2

Karena tidak semua versi jQuery dibuat sama, Anda dapat mengalami masalah yang sama seperti yang saya lakukan yang berarti memanggil $ ("# item"). RemoveClass (); sebenarnya tidak menghapus kelas. (Mungkin bug)

Metode yang lebih dapat diandalkan adalah dengan hanya menggunakan JavaScript mentah dan menghapus atribut kelas sekaligus.

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

coba dengan removeClass

Misalnya :

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>

x-rw
sumber
1

Mari kita gunakan contoh ini. Mungkin Anda ingin pengguna situs web Anda mengetahui bidang yang valid atau perlu perhatian dengan mengubah warna latar belakang bidang tersebut. Jika pengguna menekan reset maka kode Anda hanya akan mengatur ulang bidang yang memiliki data dan tidak perlu repot untuk mengulang setiap bidang lain di halaman Anda.

Filter jQuery ini akan menghapus kelas "highlightCriteria" hanya untuk input atau pilih bidang yang memiliki kelas ini.

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

Saya memiliki masalah serupa. Dalam kasus saya tentang elemen yang dinonaktifkan diterapkan bahwa kelas aspNetDisabled dan semua kontrol yang dinonaktifkan memiliki warna yang salah. Jadi, saya menggunakan jquery untuk menghapus kelas ini pada setiap elemen / kontrol yang saya tidak mau dan semuanya berfungsi dan tampak hebat sekarang.

Ini adalah kode saya untuk menghapus kelas aspNetDisabled:

$(document).ready(function () {

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

}); 
Nezir
sumber