Home >Web Front-end >Front-end Q&A >How to clear sibling elements in jquery
How to clear sibling elements in jquery
- 青灯夜游Original
- 2022-03-10 18:26:502912browse
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()".
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
<!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>
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!