jQuery a tout d’abord été créé de manière à sim­pli­fier la ma­ni­pu­la­tion DOM. L’uti­li­sa­tion de la méthode jQuery.re­mo­ve­Class() permet d’accéder aux éléments et de supprimer leurs classes CSS fa­ci­le­ment.

Méthode jQuery.re­mo­ve­Class() : de quoi s’agit-il ?

La méthode jQuery.re­mo­ve­Class() permet de supprimer une ou plusieurs classes CSS pour un élément sé­lec­tionné, sans pour autant modifier la valeur totale de l’attribut de la classe. Vous pouvez donc supprimer des classes spé­ci­fiques, et ainsi gérer de façon in­te­rac­tive le style et le com­por­te­ment de votre site Web. Pour ajouter des classes, il convient d’utiliser la méthode jQuery.addClass(). Vous avez aussi la pos­si­bi­lité d’utiliser la méthode jQuery.on(), afin de définir des ges­tion­naires pour certains évè­ne­ments et ainsi de dé­clen­cher la sup­pres­sion des classes CSS par la méthode jQuery.re­mo­ve­Class(). De plus, l’uti­li­sa­tion de cette méthode ne pose aucun problème si vous choi­sis­sez d’utiliser jQuery pour WordPress.

Conseil

L’hé­ber­ge­ment Web proposé par IONOS est une solution garantie flexible, rapide et per­for­mante. De plus, IONOS met à votre dis­po­si­tion des domaines et des adresses mail, de manière à répondre à tous vos besoins.

À quoi res­semblent la syntaxe et les pa­ra­mètres de la méthode jQuery.re­mo­ve­Class() ?

La méthode jQuery.re­mo­ve­Class() est struc­tu­rée de la manière suivante :

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

Le terme classname cor­res­pond 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é­lec­tionné au moment de la sup­pres­sion 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 sup­pres­sion est en cours.

Vous voulez en savoir plus sur les sé­lec­teurs et la syntaxe de jQuery ? Nous vous con­seil­lons de consulter notre tutoriel jQuery.

Conseil

Vous pouvez optimiser vos processus de travail et améliorer votre ef­fi­ca­cité 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 res­sources de façon au­to­ma­tique.

Exemples d’ap­pli­ca­tion de la méthode jQuery.re­mo­ve­Class()

Découvrez ci-dessous trois pos­si­bi­li­tés d’uti­li­sa­tion dif­fé­rentes pour la méthode jQuery.re­mo­ve­Class() :

Utiliser jQuery.re­mo­ve­Class() 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.re­mo­ve­Class() 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 re­mo­ve­Class() à la méthode jQuery.click(). En cliquant sur le bouton cor­res­pon­dant à l’ID btn, les deux classes big-font et blue sont sup­pri­mées de l’élément <p>.

Supprimer des classes spé­ci­fiques

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

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

Dans le cas de l’ex­pres­sion removeClass("highlight uppercase bold"), nous sup­pri­mons donc les trois classes highlight, uppercase et bold de l’élément <h1>.

Trans­mettre 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.re­mo­ve­Class(), afin de supprimer l’ensemble des classes CSS d’un élément <div> avec l’ID container, à chaque clic sur le bouton auquel cor­res­pond 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 exis­tantes sont donc sup­pri­mées de l’élément <div>.

Conseil

Avec Deploy Now, la solution proposée par IONOS, vous pouvez déployer des ap­pli­ca­tions Web en passant di­rec­te­ment par Github. Quelques étapes suffisent pour déployer au­to­ma­ti­que­ment votre projet. Vous pouvez modifier le flux de travail de vos actions à n’importe quel moment. Dans l’en­vi­ron­ne­ment de staging au­to­ma­tique, l’URL de pré­vi­sua­li­sa­tion vous permet d’obtenir ra­pi­de­ment un retour en direct.

Aller au menu principal