.removeClass()

.removeClass([ className ]) vráti: jQuery

Odstráni jednu alebo viacero tried, alebo všetky triedy zo všetkých vybraných elementov.

Ak je názov triedy vložený ako parameter, potom bude iba táto trieda odstránená z vybraných elementov. Ak v parametri niesu uvedené názvy tried, budú zmazané všetky triedy.

Viac ako jedna trieda môže byť odstránená súčasne, oddelením pomocou medzery, zo všetkých zvolených elementov takto:

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

Táto metóda je často používaná s .addClass() pre prepínanie tried elementov z jednej na druhú, takto:

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

Tu, triedy myClass a noClass sú odstránené zo všetkých odstavcov, zatiaľ čo je pridaná trieda yourClass.

Ak chcete nahradiť existujúce triedy inou triedou, môžeme namiesto toho použiť .attr('class', 'newClass').

Od jQuery 1.4, .removeClass() metóda umožňuje odstránenie triedy pomocou funkcie.

$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});

Tento príklad odstráni názov triedy predposledného <li> z posledného <li>.

Priklady:

Odstrani triedu 'blue' zo vsetkych zvolenych elementov.

 <!DOCTYPE html>
<html>
  <head>
    <style>
      p { margin: 4px; font-size:16px; font-weight:bolder; }
      .blue { color:blue; }
      .under { text-decoration:underline; }
      .highlight { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>
    <script>$("p:even").removeClass("blue");</script>
  </body>
</html>

Odstrani triedu 'blue' a 'under' zo vsetkych zvolenych elementov.

 <!DOCTYPE html>
<html>
  <head>
    <style>
      p { margin: 4px; font-size:16px; font-weight:bolder; }
      .blue { color:blue; }
      .under { text-decoration:underline; }
      .highlight { background:yellow; }
      </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>
    <script>$("p:odd").removeClass("blue under");</script>
  </body>
</html>

Odstrani vsetky triedy zo zvolenych elementov.

 <!DOCTYPE html>
<html>
  <head>
    <style>
      p { margin: 4px; font-size:16px; font-weight:bolder; }
      .blue { color:blue; }
      .under { text-decoration:underline; }
      .highlight { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <body>
    <p class="blue under">Hello</p>
    <p class="blue under highlight">and</p>
    <p class="blue under">then</p>
    <p class="blue under">Goodbye</p>
    <script>$("p:eq(1)").removeClass();</script>
  </body>
</html>