SoFunction
Updated on 2025-02-28

Example of usage of removeClass method in jQuery

This article describes the usage of removeClass() method in jQuery. Share it for your reference. The specific analysis is as follows:

This method removes one or more classes from the matching element.
Depending on the method parameters, there are the following syntax structures.

Syntax Structure 1:
The method has no parameters. Remove all classes of the matching element.

Copy the codeThe code is as follows:
$(selector).removeClass()

Example code:

The code can delete all css classes of div.

Copy the codeThe code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https:///" />
<title>removeClass() function-I</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{
  background:#336;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass();
  });
})
</script>
</head>
<body>
<div class="font bg">I welcome you</div>
<button>Click to view the effect</button>
</body>
</html>

Syntax Structure Two:

Removes the specified class in the matching element

Copy the codeThe code is as follows:
$(selector).removeClass(class)

parameter describe
class One or more CSS class names to delete. Class names are separated by spaces.

Example code:

Example 1:

Copy the codeThe code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https:///" />
<title>removeClass() function-I</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{background:#336;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass("font");
  });
})
</script>
</head>
<body>
<div class="font bg">I welcome you</div>
<button>Click to view the effect</button>
</body>
</html>

Removes a specified class.

Example 2:

Copy the codeThe code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https:///" />
<title>removeClass() function-I</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{background:#336;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass("font bg");
  });
})
</script>
</head>
<body>
<div class="font bg">I welcome you</div>
<button>Click to view the effect</button>
</body>
</html>

Remove two CSS classes and separate the class names with spaces.

Syntax Structure Three:

Copy the codeThe code is as follows:
$(selector).removeClass(function(index,oldclass))

The function returns the class name to be removed.

Parameter list:

parameter describe
function(index,oldclass) Method returns one or more space-separated class names to be removed.
index - optional, accepts the index position of the selector.
oldclass - optional, accepts the original class value of the selector.

Example code:

Example 1:

Copy the codeThe code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https:///" />
<title>removeClass() function-I</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{background:#336;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass(function(){
      return "font"
    });
  });
})
</script>
</head>
<body>
<div class="font bg">I welcome you</div>
<button>Click to view the effect</button>
</body>
</html>

Use a function as a parameter, and the function returns a CSS class name to be deleted.

Example 2:

Copy the codeThe code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="https:///" />
<title>removeClass() function-I</title>
<style type="text/css">
.font{
  font-size:18px;
  color:yellow
}
.bg{background:#336;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8."></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass(function(){
      return "font bg"
    });
  });
})
</script>
</head>
<body>
<div class="font bg">I welcome you</div>
<button>Click to view the effect</button>
</body>
</html>

Use a function as a parameter, and the function returns two CSS class names to be deleted, separated by spaces.