Home  >  Article  >  Web Front-end  >  How to clear sibling elements in jquery

How to clear sibling elements in jquery

青灯夜游
青灯夜游Original
2022-03-10 18:26:502868browse

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

    • Then use the remove() method to delete the obtained sibling elements
    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>

【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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn