classlist - Eliminar el nombre de clase del elemento con javascript

remove all class javascript

Question

Encontré la siguiente expresión regular de otra pregunta de desbordamiento de pila: cambiar la clase de un elemento con JavaScript

Y lo he usado con éxito en parte de mi guión, sin embargo, en otro, parece estar fallando.

Junté un caso de prueba muy minimalista en jsFiddle, y también está fallando:

http://jsfiddle.net/ew47Y/1/

HTML:

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

JS:

$(document).ready(function(){
     foo = document.getElementById(''foo'');
     foo.className += '' bar foobar'';
     alert(foo.className);
     foo.className.replace( /(?:^|/s)bar(?!/S)/ , '''' )
     alert(foo.className);
})​

Answer 1

Eso es porque replace realmente no modifica la cadena en la que lo llamas; más bien, devuelve una nueva cadena. Asi que:

     foo.className = foo.className.replace( /(?:^|/s)bar(?!/S)/ , '''' )

(Por cierto, no es necesario que haga esto en JavaScript en bruto, ya que los objetos jQuery ofrecen un método removeClass : http://api.jquery.com/removeClass/ . Por lo tanto, podría escribir:

     $(''#foo'').removeClass(''bar'');

o:

     $(foo).removeClass(''bar'');

)

Answer 2

No te olvides de classList .

el.classList.remove(''boop'');

http://jsfiddle.net/yXQL3/

Answer 3

También hay una solución que utiliza la palabra metacarácter de límite /b :

foo.className.replace(//bbar/b/g ,'''');

Esto puede complacer a alguien, pero tenga en cuenta que el límite de la palabra aparece también entre un carácter de palabra [A-Za-z0-9_] y el carácter de guión. Por lo tanto, un nombre de clase, por ejemplo, ''clase de barra diferente'' también se reemplazaría dando como resultado ''clase - diferente'' . Sin embargo, a diferencia de las soluciones anteriores, la solución " /b " no elimina los caracteres de espacio en blanco antes del nombre de la clase, lo que puede ser deseado, por lo que una cadena, por ejemplo, "barra de la primera barra" , terminará como "primera barra" .

Answer 4

foo.className = foo.className.replace( /(?:^|/s)bar(?!/S)/ , '''' );

o con jQuery (que parece estar usando):

foo.removeClass( ''bar'' );