Jak usunąć wszystkie klasy CSS za pomocą jQuery / JavaScript?

778

Czy zamiast pojedynczego wywoływania $("#item").removeClass()każdej klasy, jaką może mieć element, istnieje jedna funkcja, którą można wywołać, która usuwa wszystkie klasy CSS z danego elementu?

Działa zarówno jQuery, jak i surowy JavaScript.

Kliknij opcję Upvote
źródło

Odpowiedzi:

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

Wywołanie removeClassbez parametrów usunie wszystkie klasy przedmiotu.


Możesz także użyć (ale niekoniecznie jest to zalecane, poprawny sposób to ten powyżej):

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

Jeśli nie masz jQuery, byłaby to prawie jedyna opcja:

document.getElementById('item').className = '';
jimyi
źródło
7
Czy attr()wersja nie powinna być prop()teraz?
Mike
7
Wywołanie removeClass () bez parametrów nie działa już w wersji 1.11.1
Vincent
1
@Vincent Wygląda jak błąd wprowadzony w jQuery, ponieważ ich dokumentacja wyraźnie stwierdza to: 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
Tak, podejrzewam też, że to błąd, a nie projekt. W międzyczasie następujący czysty skrypt JavaScript działa dobrze. document.getElementById („item”). removeAttribute („class”);
Vincent
1
Wystąpił problem z interfejsem jQuery UI 1.9. Jeśli removeClass () nie działa, użyj removeAttr ('class')
Milad
119

Poczekaj, czy funkcja removeClass () nie usuwa domyślnie wszystkich klas, jeśli nie określono nic konkretnego? Więc

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

zrobi to samo ...

da5id
źródło
3
tak: „Usuwa wszystkie lub określone klasy z zestawu pasujących elementów.”
da5id
5
Teraz jest to odpowiednio udokumentowane : jeśli w parametrze nie podano nazw klas, wszystkie klasy zostaną usunięte.
użytkownik
13

Oczywiście.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
kangax
źródło
11

Heh, przyszedł szukać podobnej odpowiedzi. To mnie uderzyło.

Usuń określone klasy

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

Powiedz, czy element ma klasę = "class another-class"

Shawn Rebelo
źródło
9

Najkrótsza metoda

$('#item').removeAttr('class').attr('class', '');
Yanni
źródło
5

Możesz po prostu spróbować

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

Jeśli musisz uzyskać dostęp do tego elementu bez nazwy klasy, na przykład musisz dodać nową nazwę klasy, możesz to zrobić:

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

Używam tej funkcji w moim projekcie do usuwania i dodawania klas w kreatorze HTML. Powodzenia.

Alessandro Foolish Ciak DAnton
źródło
4
$('#elm').removeAttr('class');

attr klasowy nie będzie już obecny w „wiązu”.

uihelp
źródło
to działało dla mnie. removeClass();nie działało dla mnie.
kneidels
3

Lubię używać natywnych js do robienia tego, wierzcie lub nie!

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 sposoby

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

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

xgqfrms
źródło
2

Ponieważ nie wszystkie wersje jQuery są sobie równe, możesz napotkać ten sam problem, który zrobiłem, co oznacza wywołanie $ („# item”). RemoveClass (); tak naprawdę nie usuwa klasy. (Prawdopodobnie błąd)

Bardziej niezawodną metodą jest po prostu użycie surowego JavaScript i całkowite usunięcie atrybutu klasy.

document.getElementById("item").removeAttribute("class");
Vincent
źródło
1

Spróbuj z removeClass

Na przykład :

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
źródło
1

Skorzystajmy z tego przykładu. Być może chcesz, aby użytkownik Twojej witryny wiedział, że pole jest prawidłowe lub wymaga uwagi poprzez zmianę koloru tła pola. Jeśli użytkownik naciśnie przycisk reset, kod powinien zresetować tylko pola zawierające dane i nie zawracać sobie głowy zapętlaniem wszystkich innych pól na stronie.

Ten filtr jQuery usunie klasę „highlightCriteria” tylko dla danych wejściowych lub wybierze pola, które mają tę klasę.

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

Miałem podobny problem. W moim przypadku na wyłączone elementy zastosowano klasę aspNetDisabled, a wszystkie wyłączone kontrolki miały niewłaściwe kolory. Użyłem jquery do usunięcia tej klasy z każdego elementu / kontrolki, którego nie chcę i wszystko działa i wygląda teraz świetnie.

Oto mój kod do usuwania klasy aspNetDisabled:

$(document).ready(function () {

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

}); 
Nezir
źródło