Home > Article > Web Front-end > How to clear sibling elements in jquery
How to clear sibling elements in jquery
- 青灯夜游Original
- 2021-11-19 11:45:113200browse
Jquery method to clear sibling elements: 1. Use the siblings() method to obtain all sibling elements of the selected element; 2. Use the remove() method to delete the obtained sibling elements, the syntax is "$(selector). siblings().remove()".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery method of clearing sibling elements
Use the siblings() method to get all sibling elements of the selected element
Use the remove() method to delete the obtained sibling elements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings,.siblings *{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").siblings().remove();
});
});
</script>
</head>
<body>
<div class="siblings">div (父)
<p>p（兄弟元素）</p>
<span>span（兄弟元素）</span>
<h2>h2（本元素）</h2>
<h3>h3（兄弟元素）</h3>
<p>p（兄弟元素）</p>
</div>
<button>清除兄弟元素</button>
</body>
</html>
Recommended related video tutorials: jQuery Tutorial(video)
The above is the detailed content of How to clear sibling elements in jquery. For more information, please follow other related articles on the PHP Chinese website!