add class remove class jquery code example
Example 1: jquery remove class
Basic Syntax:
$(element).removeClass( "myClass yourClass" )
-------------------------------------------------------------------------------------
Html code example:
<p class="red highlight">test1</p>
<p class="red highlight marked">test2</p>
<p class="red highlight">test3</p>
<p class="red highlight">test4</p>
// remove all highlight class from p tag
<script>
$( "p" ).removeClass( "highlight" )
</script>
// output after execution of this code
<p class="red">test1</p>
<p class="red marked">test2</p>
<p class="red">test3</p>
<p class="red">test4</p>
Example 2: jquery remove class
//Remove this same line after copying
Basic Syntax:
$(element).removeClass( "myClass yourClass" )
-------------------------------------------------------------------------------------
Html code example:
<p class="red highlight">test1</p>
<p class="red highlight marked">test2</p>
<p class="red highlight">test3</p>
<p class="red highlight">test4</p>
// remove all highlight class from p tag
<script>
$( "p" ).removeClass( "highlight" )
</script>
// output after execution of this code
<p class="red">test1</p>
<p class="red marked">test2</p>
<p class="red">test3</p>
<p class="red">test4</p>
Example 3: jquery remove and add class
$( "#foo" ).toggleClass( 'className', addOrRemoveOptional );
//OR
if ($( "#foo" ).hasClass('className')) {
$( "#foo" ).removeClass( 'className');
} else {
$( "#foo" ).addClass( 'className');
}
Example 4: jquery remove class
$("button").click(function(){
$("p").removeClass("intro");
});
//Html code example:
<p class="red highlight">test1</p>
<p class="red highlight marked">test2</p>
<p class="red highlight">test3</p>
<p class="red highlight">test4</p>
// remove all highlight class from p tag
<script>
$( "p" ).removeClass( "highlight" )
</script>
// example $(element).removeClass( "myClass yourClass" )
Example 5: addclass removeclass jquery
$( "p" ).addClass( "myClass yourClass" );
Example 6: jquery remove multiple class
$("p").removeClass("blue under");