Wie kann ich alle CSS-Klassen mit jQuery/JavaScript entfernen?

Question

Anstatt einzeln aufzurufen $("#item").removeClass() Gibt es für jede einzelne Klasse, die ein Element haben kann, eine einzige Funktion, die aufgerufen werden kann, um alle CSS-Klassen aus dem angegebenen Element zu entfernen?

Sowohl jQuery als auch reines JavaScript funktionieren.

Answer 1

Die kürzeste Methode

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

Answer 2

Sie können es einfach versuchen:

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

Wenn Sie auf dieses Element ohne Klassennamen zugreifen müssen, z. B. wenn Sie einen neuen Klassennamen hinzufügen möchten, können Sie dies tun:

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

Ich verwende diese Funktion in meinem Projekt zum Entfernen und Hinzufügen von Klassen in einem HTML-Builder.

Answer 3

Da nicht alle Versionen von jQuery gleich sind, kann es sein, dass Sie auf das gleiche Problem stoßen wie ich, was bedeutet, dass der Aufruf von $("#item").removeClass(); die Klasse nicht wirklich entfernt (wahrscheinlich ein Fehler).

Eine zuverlässigere Methode besteht darin, einfach rohes JavaScript zu verwenden und das Attribut class ganz zu entfernen.

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

Answer 4

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

Das Attribut "class" wird in "elm" nicht mehr vorhanden sein.

Answer 5

Ob Sie es glauben oder nicht, ich verwende dafür gerne natives JavaScript!

Lösung 1: className

1. Alle Klassen von allen Gegenständen entfernen

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

2. Nur alle Klassen des ersten Elements entfernen

   const item1 = document.querySelector('item'); item1.className = '';

Lösung 2: classList

// remove all class of all items
 const items = [...document.querySelectorAll('.item')];
 for (const item of items) {
   item.classList.value = '';
 }

 // remove all class of the first item
 const items = [...document.querySelectorAll('.item')];
 for (const [i, item] of items.entries()) {
   if(i === 0) {
     item.classList.value = '';
   }
 }

 // or
 const item = document.querySelector('.item');
 item.classList.value = '';

jQuery-Wege (nicht empfohlen)

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

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

refs

https://developer.mozilla.org/en-US/docs/Web/API/Element/className

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList