Méthode jQuery.removeClass() : supprimer des classes d’éléments HTML

jQuery a tout d’abord été créé de manière à simplifier la manipulation DOM. L’utilisation de la méthode jQuery.removeClass() permet d’accéder aux éléments et de supprimer leurs classes CSS facilement.

Méthode jQuery.removeClass() : de quoi s’agit-il ?

La méthode jQuery.removeClass() permet de supprimer une ou plusieurs classes CSS pour un élément sélectionné, sans pour autant modifier la valeur totale de l’attribut de la classe. Vous pouvez donc supprimer des classes spécifiques, et ainsi gérer de façon interactive le style et le comportement de votre site Web. Pour ajouter des classes, il convient d’utiliser la méthode jQuery.addClass(). Vous avez aussi la possibilité d’utiliser la méthode jQuery.on(), afin de définir des gestionnaires pour certains évènements et ainsi de déclencher la suppression des classes CSS par la méthode jQuery.removeClass(). De plus, l’utilisation de cette méthode ne pose aucun problème si vous choisissez d’utiliser jQuery pour WordPress.

Conseil

L’hébergement Web proposé par IONOS est une solution garantie flexible, rapide et performante. De plus, IONOS met à votre disposition des domaines et des adresses mail, de manière à répondre à tous vos besoins.

À quoi ressemblent la syntaxe et les paramètres de la méthode jQuery.removeClass() ?

La méthode jQuery.removeClass() est structurée de la manière suivante :

$(selector).removeClass(classname, function(index, currentclass))
jQuery

Le terme classname correspond au nom de la ou des classes qu’il convient de supprimer. function(index, currentclass) désigne la fonction qui sera exécutée pour chaque élément sélectionné au moment de la suppression de la classe. Pour finir, le paramètre index se réfère à l’index de l’élément, et currentclass à la valeur de la classe CSS dont la suppression est en cours.

Vous voulez en savoir plus sur les sélecteurs et la syntaxe de jQuery ? Nous vous conseillons de consulter notre tutoriel jQuery.

Conseil

Vous pouvez optimiser vos processus de travail et améliorer votre efficacité en utilisant l’API IONOS. Dans le cadre de vos projets hébergés, vous pouvez ainsi créer une clé d’accès sécurisée et gérer vos ressources de façon automatique.

Exemples d’application de la méthode jQuery.removeClass()

Découvrez ci-dessous trois possibilités d’utilisation différentes pour la méthode jQuery.removeClass() :

Utiliser jQuery.removeClass() sans paramètre

<html>
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script>
       $(document).ready(function(){  
     $("#btn").click(function(){
       $("p").removeClass();
     });
       });
   </script>
 </head>
 <body>
   <p class="big-font blue">Example text</p>
   <button id="btn">Click to remove classes</button>
 </body>
</html>
html

En appelant la méthode jQuery.removeClass() sans aucun argument, vous pouvez supprimer l’ensemble des classes de l’élément concerné. Dans le cadre de cet exemple, nous avons combiné la méthode removeClass() à la méthode jQuery.click(). En cliquant sur le bouton correspondant à l’ID btn, les deux classes big-font et blue sont supprimées de l’élément <p>.

Supprimer des classes spécifiques

Pour supprimer une liste spéciale de classes, vous n’avez qu’à saisir celle-ci sous la forme d’une chaîne de caractères séparés, le cas échéant, par des espaces.

$("h1").removeClass("highlight uppercase bold")
jQuery

Dans le cas de l’expression removeClass("highlight uppercase bold"), nous supprimons donc les trois classes highlight, uppercase et bold de l’élément <h1>.

Transmettre une fonction en tant qu’argument

$(document).ready(function() {
    $("#btn").click(function() {
        $("div#container").removeClass(function() {
            return $(this).attr("class");
        });
    });
});
jQuery

Dans cet exemple, nous utilisons la fonction jQuery.removeClass(), afin de supprimer l’ensemble des classes CSS d’un élément <div> avec l’ID container, à chaque clic sur le bouton auquel correspond l’ID btn. La fonction .attr("class") transmise à removeClass() renvoie alors la valeur de l’attribut de classe de l’élément. De cette manière, toutes les classes CSS existantes sont donc supprimées de l’élément <div>.

Conseil

Avec Deploy Now, la solution proposée par IONOS, vous pouvez déployer des applications Web en passant directement par Github. Quelques étapes suffisent pour déployer automatiquement votre projet. Vous pouvez modifier le flux de travail de vos actions à n’importe quel moment. Dans l’environnement de staging automatique, l’URL de prévisualisation vous permet d’obtenir rapidement un retour en direct.

Cet article vous a-t-il été utile ?