.removeClass ( [className ] )Devoluciones: jQuery

Descripción: Elimine una sola clase, varias clases o todas las clases de cada elemento en el conjunto de elementos coincidentes.

  • versión agregada: 1.0.removeClass ( [className ] )

    • nombre de la claseTipo: Cadena Una o más clases separadas por espacios que se eliminarán del atributo de clase de cada elemento coincidente.

  • versión agregada: 3.3.removeClass (classNames)

    • classNamesTipo: Matriz Una matriz de clases que se eliminarán del atributo de clase de cada elemento coincidente.

  • versión agregada: 1.4.removeClass (función)

    • funciónTipo: Función (índice entero, String className) => String Una función que devuelve una o más clases separadas por espacios o una matriz de clases para eliminar. Recibe la posición de índice del elemento en el conjunto y el valor de la clase anterior como argumentos.

Si se incluye un nombre de clase como parámetro, solo esa clase se eliminará del conjunto de elementos coincidentes. Si no se especifican clases en el parámetro, se eliminarán todas las clases.

Antes de la versión 1.12 / 2.2 de jQuery, el .removeClass() método manipuló el classNamepropiedad de los elementos seleccionados, no el classatributo. Una vez que se cambió la propiedad, fue el navegador el que actualizó el atributo en consecuencia. Esto significa que cuando el class El atributo se actualizó y se eliminó el último nombre de la clase, el navegador podría haber establecido el valor del atributo en una cadena vacía en lugar de eliminar el atributo por completo. Una implicación de este comportamiento fue que este método solo funcionaba para documentos con semántica DOM HTML (por ejemplo, no documentos XML puros).

A partir de jQuery 1.12 / 2.2, este comportamiento se cambia para mejorar la compatibilidad con documentos XML, incluido SVG. A partir de esta versión, el classatributo se utiliza en su lugar. Entonces, .removeClass() se puede utilizar en documentos XML o SVG.

Se puede eliminar más de una clase a la vez, separadas por un espacio, del conjunto de elementos coincidentes, así:

$("p").removeClass("myClass yourClass")

Este método se usa a menudo con .addClass() para cambiar las clases de elementos de una a otra, así:

$("p").removeClass("myClass noClass").addClass("yourClass");

Aquí el myClass y noClass las clases se eliminan de todos los párrafos, mientras que yourClass está agregado.

Para reemplazar todas las clases existentes con otra clase, podemos usar .attr( "class", "newClass" ) en lugar de.

A partir de jQuery 1.4, el .removeClass() El método nos permite indicar la clase que se eliminará pasando una función.

$("li").last().removeClass(function()return$(this).prev().attr("class"););

Este ejemplo elimina el nombre de clase del penúltimo

  • desde el ultimo
  • .

    Ejemplos:

    Elimine la clase ‘azul’ de los elementos coincidentes.

    doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>removeClass demotitle><style>pmargin: 4px;font-size: 16px;font-weight: bolder;.bluecolor: blue;.undertext-decoration: underline;.highlightbackground: yellow;style><scriptsrc="https://code.jquery.com/jquery-3.5.0.js">script>head><body><pclass="blue under">Hellop><pclass="blue under highlight">andp><pclass="blue under">thenp><pclass="blue under">Goodbyep><script>$("p").even().removeClass("blue");script>body>html>

    Manifestación:

    Elimine la clase ‘azul’ y ‘debajo’ de los elementos coincidentes.

    doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>removeClass demotitle><style>pmargin: 4px;font-size: 16px;font-weight: bolder;.bluecolor: blue;.undertext-decoration: underline;.highlightbackground: yellow;style><scriptsrc="https://code.jquery.com/jquery-3.5.0.js">script>head><body><pclass="blue under">Hellop><pclass="blue under highlight">andp><pclass="blue under">thenp><pclass="blue under">Goodbyep><script>$("p").odd().removeClass("blue under");script>body>html>

    Manifestación:

    Elimine la clase ‘azul’ y ‘debajo’ de los elementos coincidentes (sintaxis 3.3+).

    doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>removeClass demotitle><style>pmargin: 4px;font-size: 16px;font-weight: bolder;.bluecolor: blue;.undertext-decoration: underline;.highlightbackground: yellow;style><scriptsrc="https://code.jquery.com/jquery-3.5.0.js">script>head><body><pclass="blue under">Hellop><pclass="blue under highlight">andp><pclass="blue under">thenp><pclass="blue under">Goodbyep><script>$("p").odd().removeClass(["blue","under"]);script>body>html>

    Manifestación:

    Elimine todas las clases de los elementos coincidentes.

    doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>removeClass demotitle><style>pmargin: 4px;font-size: 16px;font-weight: bolder;.bluecolor: blue;.undertext-decoration: underline;.highlightbackground: yellow;style><scriptsrc="https://code.jquery.com/jquery-3.5.0.js">script>head><body><pclass="blue under">Hellop><pclass="blue under highlight">andp><pclass="blue under">thenp><pclass="blue under">Goodbyep><script>$("p").eq(1).removeClass();script>body>html>

    Manifestación: