Quick Reach
jQuery removeAttr method
You can remove one or more attributes of specified elements by using jQuery removeAttr method. This method is quite simple to use. You have to specify element name like image element, div, paragraph etc. followed by the removeAttr method and provide the attribute to be removed.
The example below shows how to remove attributes from different elements. Let us first look at the syntax of the removeAttr method.
How to use the removeAttr method
The syntax of jQuery removeAttr method is:
$(“element”).removeAttr(“property”);
Where an element can be an image, a div, a paragraph, table etc.
Note that if you use removeAttr method to remove the attribute(s) of the element, it will change attributes to all matched elements.
jQuery remove attribute with paragraph style example
The example below shows how to remove style attribute in the paragraph by using the removeAttr method of jQuery. The paragraph’s text color is set to be red and font size is 20px. Once the button is clicked, the paragraph’s style will be removed. Have a look:
Experience this example online
|
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
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#chgdim").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<p style="color: red;font-size: 20px;">Paragraph showing remove attribute example!</p>
<hr/>
<button id="chgdim">Remove Paragraph Style Attributes</button>
</body>
</html>
|
This example shows how to remove CSS from a button. As you click on the button, it will remove style from the CSS-styled button by using the removeAttr method.
Experience this example online
|
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
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#removeatt").click(function(){
$("button").removeAttr("class");
});
});
</script>
<style>
.buttonex
{
text-align: left;
text-transform:uppercase;
background-color: #F0F0F0;
color: #355681;
}
</style>
</head>
<body>
<button>Remove Paragraph Style Attributes</button>
<hr/>
<button id="removeatt">Remove style in button</button>
</body>
</html>
|
Related reading: jQuery $.css | jQuery add attribute | jQuery html method
Leave A Comment?