-
Notifications
You must be signed in to change notification settings - Fork 265
/
Copy pathremoveClass.xml
195 lines (194 loc) · 7.8 KB
/
removeClass.xml
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<?xml version="1.0"?>
<entries>
<desc>Remove a single class, multiple classes, or all classes from each element in the set of matched elements.</desc>
<entry type="method" name="removeClass" return="jQuery">
<title>.removeClass()</title>
<signature>
<added>1.0</added>
<argument name="className" type="String">
<desc>One or more space-separated classes to be removed from the class attribute of each matched element.</desc>
</argument>
</signature>
<signature>
<added>3.3</added>
<argument name="classNames" type="Array">
<desc>An array of classes to be removed from the class attribute of each matched element.</desc>
</argument>
</signature>
<signature>
<added>1.4</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<return type="String" />
<desc>A function returning one or more space-separated class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
</argument>
</signature>
<signature>
<added>3.3</added>
<argument name="function" type="Function">
<argument name="index" type="Integer" />
<argument name="className" type="String" />
<return type="String" />
<return type="Array" />
<desc>A function returning one or more space-separated class names or an array of class names to be removed. Receives the index position of the element in the set and the old class value as arguments.</desc>
</argument>
</signature>
<desc>Remove a single class or multiple classes from each element in the set of matched elements.</desc>
<longdesc>
<p>Before jQuery version 1.12/2.2, the <code>.removeClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the <code>class</code> attribute was updated and the last class name was removed, the browser might have set the attribute's value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
<p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.removeClass()</code> can be used on XML or SVG documents.</p>
<p>More than one class may be removed at a time, separated by a space, from the set of matched elements, like so:</p>
<pre><code>
$( "p" ).removeClass( "myClass yourClass" )
</code></pre>
<p>This method is often used with <code>.addClass()</code> to switch elements' classes from one to another, like so:</p>
<pre><code>
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );
</code></pre>
<p>Here, the <code>myClass</code> and <code>noClass</code> classes are removed from all paragraphs, while <code>yourClass</code> is added.</p>
<p>To replace all existing classes with another class, we can use <code>.attr( "class", "newClass" )</code> instead.</p>
<p>As of jQuery 1.4, the <code>.removeClass()</code> method allows us to indicate the class to be removed by passing in a function.</p>
<pre><code>
$( "li" ).last().removeClass(function() {
return $( this ).prev().attr( "class" );
});
</code></pre>
<p>This example removes the class name of the penultimate <code><li></code> from the last <code><li></code>.</p>
</longdesc>
<example>
<desc>Remove the class 'blue' from the matched elements.</desc>
<code><![CDATA[
$( "p" ).even().removeClass( "blue" );
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<example>
<desc>Remove the class 'blue' and 'under' from the matched elements.</desc>
<code><![CDATA[
$( "p" ).odd().removeClass( "blue under" );
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<example>
<desc>Remove the class 'blue' and 'under' from the matched elements (3.3+ syntax).</desc>
<code><![CDATA[
$( "p" ).odd().removeClass( [ "blue", "under" ] );
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.4"/>
<category slug="version/1.12-and-2.2"/>
<category slug="version/3.3"/>
</entry>
<entry type="method" name="removeClass" return="jQuery">
<signature>
<added>1.0</added>
</signature>
<desc>Remove all classes from each matched element.</desc>
<longdesc>
<p>Before jQuery version 1.12/2.2, the <code>.removeClass()</code> method manipulated the <code>className</code> <em>property</em> of the selected elements, not the <code>class</code> <em>attribute</em>. Once the property was changed, it was the browser that updated the attribute accordingly. This means that when the <code>class</code> attribute was updated and the last class name was removed, the browser might have set the attribute's value to an empty string instead of removing the attribute completely. An implication of this behavior was that this method only worked for documents with HTML DOM semantics (e.g., not pure XML documents).</p>
<p>As of jQuery 1.12/2.2, this behavior is changed to improve the support for XML documents, including SVG. Starting from this version, the <code>class</code> <em>attribute</em> is used instead. So, <code>.removeClass()</code> can be used on XML or SVG documents.</p>
</longdesc>
<example>
<desc>Remove all the classes from the matched elements.</desc>
<code><![CDATA[
$( "p" ).eq( 1 ).removeClass();
]]></code>
<css><![CDATA[
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
}
.blue {
color: blue;
}
.under {
text-decoration: underline;
}
.highlight {
background: yellow;
}
]]></css>
<html><![CDATA[
<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>
]]></html>
</example>
<category slug="attributes"/>
<category slug="manipulation/class-attribute"/>
<category slug="css"/>
<category slug="version/1.0"/>
<category slug="version/1.12-and-2.2"/>
</entry>
</entries>