How to use remove (classname) Method and removeClass () using function method in JQuery

In this article, I will explain use of remove (classname) Method and how to use removeClass () method using function in JQuery.
  • 2657

Introduction

removeClass() method removes one or more classes from the selected elements. If empty parameter is determine, this method will remove ALL classes from the selected elements.

JQuery CSS remove(classname) method

remove(classname) method remove the specified class from select element.

  • classname Remove one or more class. remove several classes with space.

Syntax

$(selector).removeClass(classname)

Example

The following example shows how to remove(classname) method in jquery.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").click(function () {

            $("p").removeClass("addclass");

        });

    });

</script>

<style type="text/css">

.addclass

{

font-size:120%;

color:pink;

}

</style>

</head>

 

<body>

<h2>RemoveClass() method example</h2>

<p class="addclass">First paragraph.</p>

<p class="addclass">Second paragraph.</p>

<button>Remove the "addclass" class from all p elements</button>

</body>

</html>

 

Output


  remove simple.jpg

JQuery CSS removeClass() using function method

removeClass() using a function to remove a class from the selected elements.

Syntax

$(selector).removeClass(function(index,oldoffset))

Example

The following example shows how to removeClass() using function method in jquery.

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("button").click(function () {

            $("li").removeClass(function (n) {

                if (n == 0 || n == 1) { return "listitem" }

                else { return "" }

            });

        });

    });

</script>

<style type="text/css">

.listitem

{

font-size:large;

color:green;

}

</style>

</head>

 

<body>

<h1>RemoveClass(function) Example</h1>

<ul>

<li class="listitem">Sunday</li>

<li class="listitem">Monday</li>

<li class="listitem">Tuesday</li>

</ul>

<button>Click for remove class "listitem" from the list elements with index 0 and 1</button>

</body>

</html>

 

Output

 

 remove function.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.