Comment puis-je supprimer les classes CSS des éléments à l'aide de JavaScript pur ?

Éliminer les classes CSS des éléments avec du JavaScript pur

Dans le domaine du développement Web, la tâche de supprimer les classes CSS des éléments sans recourir à jQuery apparaît souvent. Cette quête nécessite une compréhension approfondie des capacités de JavaScript.

L'approche moderne : ClassList à la rescousse

Pour atteindre cet objectif de manière conforme aux standards du Web en vigueur, le La propriété classList brille comme la méthode préférée. Pris en charge par la majorité des principaux navigateurs, cet attribut fournit un moyen direct de manipuler les classes.

Implémentation en action

Pour illustrer l'utilisation de classList, considérons le code suivant extrait :

ELEMENT.classList.remove("CLASS_NAME");

Voici un exemple à fournir davantage clarté :

<div>
<pre class="brush:php;toolbar:false">function remove() {
  const el = document.querySelector('#el');
  el.classList.remove("red");
}

remove.onclick = () => {
  remove();
};

Dans ce code, la fonction remove() utilise classList.remove() pour éliminer la classe "rouge" de l'élément avec l'ID el. En cliquant sur le bouton avec l'ID supprimer, cette action est déclenchée, entraînant la suppression du style CSS correspondant.