Question Supprimer la classe CSS de l'élément avec JavaScript (pas jQuery) [dupliquer]


Cette question a déjà une réponse ici:

Quelqu'un pourrait-il me faire savoir comment supprimer une classe sur un élément en utilisant JavaScript uniquement? S'il vous plaît ne me donnez pas de réponse avec jQuery car je ne peux pas l'utiliser, et je ne sais rien à ce sujet.


484
2018-01-28 15:43


origine


Réponses:


La bonne façon de le faire est d'utiliser classList. C'est maintenant largement pris en charge dans la dernière version de la plupart des navigateurs modernes:

ELEMENT.classList.remove("CLASS_NAME");

Documentation: https://developer.mozilla.org/fr/DOM/element.classList


768
2018-01-28 16:29



document.getElementById("MyID").className =
    document.getElementById("MyID").className.replace(/\bMyClass\b/,'');

MyID est l'identifiant de l'élément et MyClass est le nom de la classe que vous souhaitez supprimer.


METTRE À JOUR:  Pour prendre en charge les noms de classe contenant des caractères de tiret, tels que "My-Class", utilisez

document.getElementById("MyID").className =
  document.getElementById("MyID").className
    .replace(new RegExp('(?:^|\\s)'+ 'My-Class' + '(?:\\s|$)'), ' ');

503
2018-01-28 15:49



Voici une façon de faire cuire cette fonctionnalité directement dans tous les éléments DOM:

HTMLElement.prototype.removeClass = function(remove) {
    var newClassName = "";
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== remove) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName;
}

54
2017-08-08 00:49



function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
        if (hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ');
        }
    }

39
2018-01-28 15:45



div.classList.add("foo");
div.classList.remove("foo");

Plus à https://developer.mozilla.org/en-US/docs/Web/API/element.classList


30
2018-06-17 22:45



modifier

Ok, complète la ré-écriture. Ça fait un moment que j'ai appris un peu et que les commentaires ont aidé.

Node.prototype.hasClass = function (className) {
    if (this.classList) {
        return this.classList.contains(className);
    } else {
        return (-1 < this.className.indexOf(className));
    }
};

Node.prototype.addClass = function (className) {
    if (this.classList) {
        this.classList.add(className);
    } else if (!this.hasClass(className)) {
        var classes = this.className.split(" ");
        classes.push(className);
        this.className = classes.join(" ");
    }
    return this;
};

Node.prototype.removeClass = function (className) {
    if (this.classList) {
        this.classList.remove(className);
    } else {
        var classes = this.className.split(" ");
        classes.splice(classes.indexOf(className), 1);
        this.className = classes.join(" ");
    }
    return this;
};


Old Post
Je travaillais juste avec quelque chose comme ça. Voici une solution que j'ai imaginée ...

// Some browsers don't have a native trim() function
if(!String.prototype.trim) {
    Object.defineProperty(String.prototype,'trim', {
        value: function() {
            return this.replace(/^\s+|\s+$/g,'');
        },
        writable:false,
        enumerable:false,
        configurable:false
    });
}
// addClass()
// first checks if the class name already exists, if not, it adds the class.
Object.defineProperty(Node.prototype,'addClass', {
    value: function(c) {
        if(this.className.indexOf(c)<0) {
            this.className=this.className+=' '+c;
        }
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});
// removeClass()
// removes the class and cleans up the className value by changing double 
// spacing to single spacing and trimming any leading or trailing spaces
Object.defineProperty(Node.prototype,'removeClass', {
    value: function(c) {
        this.className=this.className.replace(c,'').replace('  ',' ').trim();
        return this;
    },
    writable:false,
    enumerable:false,
    configurable:false
});

Vous pouvez maintenant appeler myElement.removeClass('myClass')

ou enchaînez: myElement.removeClass("oldClass").addClass("newClass");


26
2017-08-28 15:23



C'est très simple, je pense.

document.getElementById("whatever").classList.remove("className");

15
2017-08-23 13:29



essayer:

function removeClassName(elem, name){
    var remClass = elem.className;
    var re = new RegExp('(^| )' + name + '( |$)');
    remClass = remClass.replace(re, '$1');
    remClass = remClass.replace(/ $/, '');
    elem.className = remClass;
}

9
2018-01-28 15:47



var element = document.getElementById('example_id');
var remove_class = 'example_class';

element.className = element.className.replace(' ' + remove_class, '').replace(remove_class, '');

4
2017-11-09 16:30



Toutes ces réponses sont trop compliquées, essayez

var string = "Hello, whats on your mind?";
var new_string = string.replace(', whats on your mind?', '');

Le résultat serait un retour de la chaîne

Hello

Super facile. Crédits aller à jondavidjohn Supprimer une partie de la chaîne en Javascript


2
2017-07-15 10:45