Home >Web Front-end >Front-end Q&A >How to delete an attribute of a div in jquery
How to delete an attribute of a div in jquery
- 青灯夜游Original
- 2022-05-23 18:04:533317browse
Two deletion methods: 1. Use attr() to delete, the syntax is "$("div").attr("attribute name","");", you can set the value of the specified attribute to Empty, thereby invalidating the attribute; 2. Use removeAttr() to delete, the syntax is "$("div").removeAttr("Attribute name");".
The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.
What are attributes
Attributes can provide some additional information for HTML tags, or modify HTML tags. Attributes need to be added in the start tag, and the syntax format is:
attr="value"
attr represents the attribute name, and value represents the attribute value. Attribute values must be surrounded by double quotes " " or single quotes ' '.
Note that although both double quotes and single quotes can surround attribute values, for the sake of standardization and professionalism, please use double quotes as much as possible.
A tag can have no attributes or one or more attributes.
Two methods for jquery to delete an attribute of a div
Method 1: Use attr() to set the value of the specified attribute Is empty
When using the attr() method to set the attribute value of the selected element to empty, the specified attribute can also be invalidated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("div").attr("style","");
});
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<div style="font-size:120%;color:red">这是一个div元素。</div>
<p>这是一个p元素。</p>
<button>删除div元素的 style 属性</button>
</body>
</html>
Method 2: Use removeAttr() to directly delete the specified attribute
removeAttr() method removes from the selected element One or more attributes. To remove several properties, separate the property names with spaces.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").removeAttr("id class");
});
});
</script>
<style type="text/css">
#p1 {
color: white;
background-color: green;
font-size: 20px;
padding: 5px;
margin: 5px;
}
.blue {
color: white;
background-color: blue;
font-size: 20px;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<div id="p1">这是一个div元素。</div>
<div class="blue">这是另一个div元素。</div>
<button>移除所有div元素的id和class属性</button>
</body>
</html>
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to delete an attribute of a div in jquery. For more information, please follow other related articles on the PHP Chinese website!