jQuery provides method to remove one or more class names from given or selected elements.
Quick Reach
Syntax of removeclass()
$(selector).removeClass(classname,function(index,currentclass))
For example, if you have multiple <p> tags in your page with different class names and want to remove a specific class:
$(“p”).removeClass(“orangetext”);
It will search through all P of document and then remove class orangetext wherever it will be found. All formatting will be removed, as specified in orangetext class.
$(“div”).removeClass(“demomenu”);
It will remove demomenu class from all div of document.
Please note, no ‘.’ (period) before specifying class name.
Example of using removeclass() method
This example will show how to remove a class and then its display impact. The orangetext class will be removed once ‘remove orange class’ link is clicked. All the formatting will be removed as well as that, that was made hidden in document.ready state will keep on showing, as it was made hidden on the basis of class name.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<html>
<head>
<style type=”text/css”>
/*Menu number 1*/
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exPgreenclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: green;
}
.exPredclass {
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: red;
}
.exPorangeclass{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: orange;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“#link1”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).show();
});
$(“#link2”).click(function () {
$(“.exPredclass”).show();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).hide();
});
$(“#link3”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).show();
$(“.exPgreenclass”).hide();
});
$(“#link4”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).show();
$(“.exPgreenclass”).hide();
$(“p”).removeClass(“exPorangeclass”);
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” title=“Green Text” href=“#”>Green Text</a>
<a class=“linkclass” id=“link2” title=“Red Text” href=“#”>Red Text</a>
<a class=“linkclass” id=“link3” title=“Orange Text” href=“#”>Orange Text</a>
<a class=“linkclass” id=“link4” title=“Orange Text” href=“#”>remove orange class</a>
</div>
<p class=“exPgreenclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPredclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPorangeclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
</body>
</html>
|
Removing multiple classes by using removeclass() method
More than one classes can be removed by using removeclass() method as follows:
$(“p”).removeClass(“exPgreenclass exPredclass exPorangeclass”);
This will remove exPgreenclass exPredclass exPorangeclass classes from <p> tags in document.
Example of removing multiple classes
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<html>
<head>
<style type=”text/css”>
/*Menu number 1*/
.demomenu {
width: 220px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #C43209;
color: #333;
}
.linkclass {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
.exPgreenclass
{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: green;
}
.exPredclass {
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: red;
}
.exPorangeclass{
width: 220px;
padding: 0 0 0 0;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #ffffff;
color: orange;
}
</style>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“#link1”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).show();
});
$(“#link2”).click(function () {
$(“.exPredclass”).show();
$(“.exPorangeclass”).hide();
$(“.exPgreenclass”).hide();
});
$(“#link3”).click(function () {
$(“.exPredclass”).hide();
$(“.exPorangeclass”).show();
$(“.exPgreenclass”).hide();
});
$(“#link4”).click(function () {
$(“.exPredclass”).show();
$(“.exPorangeclass”).show();
$(“.exPgreenclass”).show();
$(“p”).removeClass(“exPgreenclass exPredclass exPorangeclass”);
});
});
</script>
</head>
<body>
<div class=“demomenu”>
<a class=“linkclass” id=“link1” title=“Green Text” href=“#”>Green Text</a>
<a class=“linkclass” id=“link2” title=“Red Text” href=“#”>Red Text</a>
<a class=“linkclass” id=“link3” title=“Orange Text” href=“#”>Orange Text</a>
<a class=“linkclass” id=“link4” title=“Orange Text” href=“#”>remove green, red and orange class</a>
</div>
<p class=“exPgreenclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPredclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
<p class=“exPorangeclass”>Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text</p>
</body>
</html>
|
Leave A Comment?