remove - Eliminar la clase CSS del elemento con JavaScript(sin jQuery)

remove class jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• Cambia la clase de un elemento con JavaScript 25 respuestas

¿Alguien podría decirme cómo eliminar una clase en un elemento usando solo JavaScript? Por favor, no me des una respuesta con jQuery, ya que no puedo usarla y no sé nada al respecto.

Answer 1

Aquí hay una forma de integrar esta funcionalidad en todos los elementos 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;
}

Answer 2

Es muy simple, creo.

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

Answer 3

La forma correcta y estándar de hacerlo es usando classList . Ahora es ampliamente compatible con la última versión de la mayoría de los navegadores modernos :

ELEMENT.classList.remove("CLASS_NAME");

Documentación: https://developer.mozilla.org/en/DOM/element.classList

Answer 4

También hay $.toggleClass , $.addClass y $.removeClass . Para obtener documentación, visite http://api.jquery.com/toggleClass/ .

Eche un vistazo a este ejemplo de jsFiddle para verlo en acción.

Answer 5

Todas estas respuestas son demasiado complicadas, intente

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

El resultado sería un retorno de la cadena.

Hello

Muy facil. Los créditos van a jondavidjohn Eliminar parte de la cadena en Javascript

Answer 6

Yo uso este código de fragmento JS:

En primer lugar, llego a todas las clases y luego, de acuerdo con el índice de mi clase objetivo, establezco className = "" .

Target = document.getElementsByClassName("yourClass")[1];
Target.className="";

Answer 7

tratar:

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

Answer 8

Editar

De acuerdo, completa re-escribir. Ha pasado un tiempo, he aprendido un poco y los comentarios han ayudado.

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; }; Antiguo puesto Solo estaba trabajando con algo como esto. Aquí hay una solución que se me ocurrió ...

// 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
});

Ahora puedes llamar a myElement.removeClass(''myClass'')

o myElement.removeClass("oldClass").addClass("newClass"); : myElement.removeClass("oldClass").addClass("newClass");

Answer 9

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

Más información en https://developer.mozilla.org/en-US/docs/Web/API/element.classList

Answer 10

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

donde MyID es el ID del elemento y MyClass es el nombre de la clase que desea eliminar.

ACTUALIZACIÓN: Para admitir nombres de clase que contengan guiones, como "My-Class", use

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

Answer 11

document.getElementById("whatever").className += "classToKeep";

Con el signo más (''+'') agregando la clase en lugar de sobrescribir cualquier clase existente

Answer 12

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,'' '');
        }
    }

Answer 13

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

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