Rimuovere nomeclasse da elemento con javascript

ho trovato la seguente espressione regolare da un'altra domanda Stack Overflow: Change an element's class with JavaScript Rimuovere nomeclasse da elemento con javascript

e lo hanno utilizzato in parte del mio script con successo, tuttavia in un altro sembra essere mancato.

ho buttato insieme un banco di prova molto minimalista su jsFiddle, ed è anche fallendo:

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

fonte

2012-03-31 Chris Sobolewski

Sono confuso dalla miscela di jQuery e jQuery non per fare jQuery cose semplicistiche –

Sto scrivendo una libreria e lo trovo cattiva pratica per fare una libreria richiede un'altra. –

per favore controlla questa risposta [Rimuovi e aggiungi classe css usando javascript] (http://stackoverflow.com/a/33434902/2466310) – thejustv

Questo perché replace non modifica effettivamente la stringa lo chiami; piuttosto, restituisce una nuova stringa. Quindi:

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

(A proposito, in realtà non c'è bisogno di fare questo in prime JavaScript, poiché gli oggetti jQuery offrono un metodo removeClass:. http://api.jquery.com/removeClass/ Così si potrebbe scrivere:

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

o :

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

)

fonte

2012-03-31 21:24:32 ruakh

+15

Funzione Pure JS: 'function removeClass (e, c) {e.className = e.className .replace (new RegExp ('(?:^| \\ s)' + c + '(?!\\ S) '),' ');} ' – pppglowacki

Se si desidera rimuovere tutte le occorrenze di un nome di classe, utilizzare il modificatore [' g'] (http://www.w3schools.com/jsref/jsref_regexp_g.asp) alla fine dell'espressione regolare, in questo modo: 'foo.className.replace (/ (^ | \ s) bar (?! \ S)/g, '')'. A proposito, l'uso del [gruppo non catturante] (http://www.regular-expressions.info/refadv.html) '(? :)' non è necessario qui. – Adam

Si noti che l'uso del [word boundary metacharacter '\ b'] (http://www.regular-expressions.info/wordboundaries.html), come ad esempio:' foo.className.replace (/ \ bbar \ b/g , '') ', non è adatto qui, perché il confine di parola avviene anche tra un carattere di parola' [A-Za-z0-9_] 'e il trattino' -'. Pertanto un nome di classe, ad es. * anche 'different-bar-class' * verrebbe sostituito risultando in * 'different - class' *. Tuttavia, al contrario delle soluzioni di cui sopra, la soluzione "' \ b' "non rimuove il carattere di spaziatura' \ s' prima del nome della classe, quindi una stringa, ad es. * 'barra prima barra' * finirà come * 'prima barra' *. – Adam

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

o con jQuery (che ti sembra di essere utilizzato):

foo.removeClass('bar');

fonte

2012-03-31 21:24:39

C'è anche una soluzione che utilizza il word boundary metacharacter \b:

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

Questo può suite di qualcuno, ma essere consapevoli si verifica il limite di parola anche tra un carattere di parola [A-Za-z0-9_] e il trattino - carattere. Pertanto un nome di classe, ad es. "classe-barra diversa" sarebbe anche sostituito risultante in "classe diversa". Tuttavia, a differenza delle soluzioni di cui sopra, la soluzione "\b" non rimuove il carattere dello spazio bianco \s prima del nome della classe, che può essere desiderato, quindi una stringa, ad es. 'barra primabar' finirà come 'firstbar'.

fonte

2013-08-08 12:10:00 Adam

Non dimenticare di classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

fonte

2013-12-06 21:15:43

non funziona (solo) su IE 8, 9 e Opera Mini 8 http://caniuse.com/#feat=classlist – maciek

Rimuovere nomeclasse da elemento con javascript

risposta

Problemi correlati