Home > Article > Web Front-end > How to remove the first element in jquery
How to remove the first element in jquery
- 青灯夜游Original
- 2021-11-16 15:06:112314browse
Method to remove the first element: 1. Use the "eq(0)" selector and remove() method, syntax "$("Element").eq(0).remove()"; 2. Use the ":first" selector and remove() method, the syntax is "$("Element:first").remove()".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery removes the first element
Method 1: "eq(0)" selector remove() method
Use the "eq(0)" selector to get the first element object
Use the remove() method to delete the selected element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#but1").click(function() {
$("p").eq(0).remove();
});
});
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<button id="but1">删除第一个元素</button>
</body>
</html>
Method 2: ":first" selector and remove() method
Utilize ": firs" selector gets the first element object
Use the remove() method to delete the selected element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#but1").click(function() {
$("p:first").remove();
});
});
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
<button id="but1">删除第一个元素</button>
</body>
</html>
Recommended related tutorials: jQuery video tutorial
The above is the detailed content of How to remove the first element in jquery. For more information, please follow other related articles on the PHP Chinese website!