如何使用 jQuery 库来删除 HTML 页面中指定的元素下的所有子元素,但是保留其中一个特定的子元素
要使用jQuery删除指定元素下的所有子元素,但保留一个特定的子元素,你可以先选择所有子元素,然后排除掉你想要保留的元素,再调用.remove()
方法删除它们。以下是一个示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Remove All But One Child</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="parent">
<div>Child 1</div>
<div id="keep">Child 2 - Will Be Kept</div>
<div>Child 3</div>
<!-- More children... -->
</div>
<script>
$(document).ready(function(){
// 保留id为'keep'的子元素,删除其它所有子元素
$('#parent').children().not('#keep').remove();
});
</script>
</body>
</html>
在这个例子中,#parent
元素下的所有子元素被选中,然后通过 .not('#keep')
排除了ID为 keep
的子元素。最后,使用 .remove()
方法删除了其它所有子元素,只保留了ID为 keep
的子元素。
评论已关闭