containing - jQuery removeClass wildcard

removeclass javascript

Question

¿Hay alguna manera fácil de eliminar todas las clases que coinciden, por ejemplo,

color-*

así que si tengo un elemento:

<div id="hello" class="color-red color-brown foo bar"></div>

después de quitar, sería

<div id="hello" class="foo bar"></div>

¡Gracias!

Answer 1

Basado en la answer ARS81 (que solo coincide con los nombres de clase que comienzan con), aquí hay una versión más flexible. También una hasClass() .

Uso: $(''.selector'').removeClassRegex(''//S*-foo[0-9]+'')

$.fn.removeClassRegex = function(name) {
  return this.removeClass(function(index, css) {
    return (css.match(new RegExp(''//b('' + name + '')//b'', ''g'')) || []).join('' '');
  });
};

$.fn.hasClassRegex = function(name) {
  return this.attr(''class'').match(new RegExp(''//b('' + name + '')//b'', ''g'')) !== null;
};

Answer 2

Esto eliminará efectivamente todos los nombres de clase que comienzan con el prefix del atributo de class de un nodo. Otras respuestas no admiten elementos SVG (a partir de la fecha en que se escribe esto), pero esta solución sí lo hace:

$.fn.removeClassPrefix = function(prefix){
    var c, regex = new RegExp("(^|//s)" + prefix + "//S+", ''g'');
    return this.each(function(){
        c = this.getAttribute(''class'');
        this.setAttribute(''class'', c.replace(regex, ''''));
    });
};

Answer 3

He escrito un complemento que hace esto llamado alterClass - Eliminar clases de elementos con coincidencia de comodines. Opcionalmente agregue clases: https://gist.github.com/1517285

$( ''#foo'' ).alterClass( ''foo-* bar-*'', ''foobar'' )

Answer 4

He generalizado esto en un complemento de Jquery que toma una expresión regular como un argumento.

Café:

$.fn.removeClassRegex = (regex) ->
  $(@).removeClass (index, classes) ->
    classes.split(//s+/).filter (c) ->
      regex.test c
    .join '' ''

Javascript:

$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(//s+/).filter(function(c) {
      return regex.test(c);
    }).join('' '');
  });
};

Entonces, para este caso, el uso sería (tanto Café como Javascript):

$(''#hello'').removeClassRegex(/^color-/)

Tenga en cuenta que estoy usando la función Array.filter que no existe en IE <9. En su lugar, puede usar la función de filtro de Underscore o Google para un polyfill como este WTFPL .

Answer 5

La función removeClass toma un argumento de función desde jQuery 1.4 .

$("#hello").removeClass (function (index, className) {
    return (className.match (/(^|/s)color-/S+/g) || []).join('' '');
});

Ejemplo en vivo: http://jsfiddle.net/xa9xS/1409/

Answer 6

Para un plugin jQuery intente esto

$.fn.removeClassLike = function(name) {
    return this.removeClass(function(index, css) {
        return (css.match(new RegExp(''//b('' + name + ''//S*)//b'', ''g'')) || []).join('' '');
    });
};

o esto

$.fn.removeClassLike = function(name) {
    var classes = this.attr(''class'');
    if (classes) {
        classes = classes.replace(new RegExp(''//b'' + name + ''//S*//s?'', ''g''), '''').trim();
        classes ? this.attr(''class'', classes) : this.removeAttr(''class'');
    }
    return this;
};

Answer 7

Si quieres usarlo en otros lugares, te sugiero una extensión. Este está funcionando bien para mí.

 $.fn.removeClassStartingWith = function (filter) {
    $(this).removeClass(function (index, className) {
        return (className.match(new RegExp("//S*" + filter + "//S*", ''g'')) || []).join('' '')
    });
    return this;
};

Uso:

$(".myClass").removeClassStartingWith(''color'');

Answer 8

Si solo necesita eliminar el último color establecido, lo siguiente podría ser adecuado para usted.

En mi situación, necesitaba agregar una clase de color a la etiqueta del cuerpo en un evento de clic y eliminar el último color que se estableció. En ese caso, almacena el color actual y luego busca la etiqueta de datos para eliminar el último color establecido.

Código:

var colorID = ''Whatever your new color is'';

var bodyTag = $(''body'');
var prevColor = bodyTag.data(''currentColor''); // get current color
bodyTag.removeClass(prevColor);
bodyTag.addClass(colorID);
bodyTag.data(''currentColor'',colorID); // set the new color as current

Puede que no sea exactamente lo que necesitas, pero para mí lo fue y esta fue la primera pregunta SO que miré, así que pensé en compartir mi solución en caso de que ayude a alguien.

Answer 9

Similar a la answer @ tremby, aquí está la answer @ Kobi como un complemento que coincidirá con prefijos o sufijos.

• por ejemplo, tiras btn-mini y btn-danger pero no btn cuando stripClass("btn-") .
• ex) strips horsebtn y cowbtn pero no btn-mini o btn cuando stripClass(''btn'', 1)

Código:

$.fn.stripClass = function (partialMatch, endOrBegin) {
    /// <summary>
    /// The way removeClass should have been implemented -- accepts a partialMatch (like "btn-") to search on and remove
    /// </summary>
    /// <param name="partialMatch">the class partial to match against, like "btn-" to match "btn-danger btn-active" but not "btn"</param>
    /// <param name="endOrBegin">omit for beginning match; provide a ''truthy'' value to only find classes ending with match</param>
    /// <returns type=""></returns>
    var x = new RegExp((!endOrBegin ? "//b" : "//S+") + partialMatch + "//S*", ''g'');

    // https://.com/a/2644364/1037948
    this.attr(''class'', function (i, c) {
        if (!c) return; // protect against no class
        return c.replace(x, '''');
    });
    return this;
};

https://gist.github.com/zaus/6734731

Answer 10

También puede usar la propiedad className del objeto DOM del elemento:

var $hello = $(''#hello'');
$(''#hello'').attr(''class'', $hello.get(0).className.replace(//bcolor-/S+/g, ''''));

Answer 11

También puedes hacer esto con JavaScript de vainilla usando Element.classList . No hay necesidad de usar una expresión regular, ya sea:

function removeColorClasses(element) { for (let className of Array.from(element.classList)) if (className.startsWith("color-")) element.classList.remove(className); }

Nota: Tenga en cuenta que creamos una copia de Array de classList antes de comenzar, eso es importante ya que classList es un DomTokenList vivo que se actualizará cuando se eliminen las clases.

Answer 12

Tuve el mismo problema y se me ocurrió lo siguiente que usa el método _.filter de guión bajo. Una vez que descubrí que removeClass toma una función y le proporciona una lista de nombres de clase, fue fácil convertir eso en una matriz y filtrar el nombre de clase para volver al método removeClass.

// Wildcard removeClass on ''color-*''
$(''[class^="color-"]'').removeClass (function (index, classes) {
  var
    classesArray = classes.split('' ''),
    removeClass = _.filter(classesArray, function(className){ return className.indexOf(''color-'') === 0; }).toString();

  return removeClass;
});

Answer 13

Una división de expresiones regulares en el límite de la palabra /b no es la mejor solución para esto:

var prefix = "prefix";
var classes = el.className.split(" ").filter(function(c) {
    return c.lastIndexOf(prefix, 0) !== 0;
});
el.className = classes.join(" ");

o como una mezcla de jQuery:

$.fn.removeClassPrefix = function(prefix) {
    this.each(function(i, el) {
        var classes = el.className.split(" ").filter(function(c) {
            return c.lastIndexOf(prefix, 0) !== 0;
        });
        el.className = classes.join(" ");
    });
    return this;
};

Answer 14

podemos obtener todas las clases por .attr("class") , y para Array, And loop & filter:

var classArr = $("#sample").attr("class").split(" ")
$("#sample").attr("class", "")
for(var i = 0; i < classArr.length; i ++) {
    // some condition/filter
    if(classArr[i].substr(0, 5) != "color") {
        $("#sample").addClass(classArr[i]);
    }
}

demostración: http://jsfiddle.net/L2A27/1/

Answer 15

si tiene más de un elemento con un ''ejemplo'' de nombre de clase, para eliminar las clases de ''color'' en todos ellos, puede hacer esto: [usando jquery]

var objs = $(''html'').find(''.example'');
for(index=0 ; index < obj1s.length ; index++){
    objs[index].className = objs[index].className.replace(/col-[a-z1-9/-]*/,'''');
}

si no coloca [a-z1-9 -] * en su expresión regular, no eliminará las clases que tengan un número o algo de ''-'' en sus nombres.

Answer 16

Una función genérica que elimina cualquier clase que comience con begin :

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("//b"+begin+"//S+", "g") ) || []).join('' '');
    });
}

http://jsfiddle.net/xa9xS/2900/

var begin = ''color-'';

function removeClassStartingWith(node, begin) {
    node.removeClass (function (index, className) {
        return (className.match ( new RegExp("//b"+begin+"//S+", "g") ) || []).join('' '');
    });
}

removeClassStartingWith($(''#hello''), ''color-'');

console.log($("#hello")[0].className);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello" class="color-red color-brown foo bar"></div>

Answer 17

$(''div'').attr(''class'', function(i, c){
    return c.replace(/(^|/s)color-/S+/g, '''');
});