How to clear sibling elements in jquery-Front-end Q&A-php.cn

How to clear sibling elements in jquery

青灯夜游

Release： 2022-03-10 18:48:50

Original

2910 people have browsed it

Jquery method to clear sibling elements: 1. Use siblings(), next(), prev() and other methods to obtain sibling elements; 2. Use the remove() method to delete the obtained sibling elements. Yes, the syntax is "sibling element.remove()".

How to clear sibling elements in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

jquery clears sibling elements

Implementation method:

First, get the sibling elements. There are generally seven methods: siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
- siblings() method, mainly used to obtain all elements of the same level of the specified element
- next() method, mainly used to obtain the next sibling element of the specified element
- nextAll() method, mainly used to obtain all elements of the next sibling level of the specified element
- nextUntil() method, mainly used to obtain the specified element The next sibling element of The prevAll() method of the upper level sibling element of the specified element is mainly used to obtain all the sibling elements of the upper level of the specified element.
- The prevUntil() method is mainly used to obtain the previous sibling element of the specified element. This sibling element must be the element between the specified element and the element set by the prevUntil() method
Example: Delete all elements of the same level

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").siblings().css({
					"color": "red",
					"border": "2px solid red"
				});
				$("button").click(function() {
					$("li.start").siblings().remove();
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li>li (类名为"star"的上一个兄弟节点)</li>
				<li class="start">类名称为“star”的li元素</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
				<li>li (类名为"star"的下一个兄弟节点)</li>
			</ul>
		</div>
		<p>选择类名称为“star”的li元素的所有兄弟元素</p>
		<button>删除所有兄弟元素</button>
	</body>
</html>

Copy after login

【Recommended learning:

jQuery video tutorial, web front-end 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!