JQuery,如何清除,除了点击的元素以外,其他所有元素
发布网友
发布时间：2022-04-24 01:15
共4个回答
热心网友
时间：2022-04-21 18:26
可以使用Jquery中的siblings()和remove()方法实现。实现原理主要是使用siblings获取被点击元素之外的同级元素，然后使用remove()删除。完整的代码如下：
运行的效果如下：
例如当点击DIV内容为2的框时，其他的DIV被清除，内容为2的框移到最顶，点击后的效果图如下：
扩展资料：
如果想对移到最顶的框进行一定的突出显示处理，比如给个背景颜色，字体加大，可以利用css()方法，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery例子</title>
<link href="__CSS__/base.css" rel="stylesheet">
<script src="__JS__/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(".class1").click(function() {
$(this).siblings().remove();
$(this).css({"background-color":"yellow","font-size":"50px"});
});
});
</script>
<div class="main">
<div class="class1">1</div>
<div class="class1">2</div>
<div class="class1">3</div>
<div class="class1">4</div>
</div>
<style type="text/css">
.main{width:640px;height:500px;margin:0 auto;border:1px solid red;}
.class1{width:90%;height:100px;margin:0 auto;border:1px solid red;margin-top:10px;font-size:40px;}
</style>
</body>
</html>
运行的效果如下：
热心网友
时间：2022-04-21 19:44
思路：获取被点击元素之外的元素，使用remove()方法删除节点。
下面进行实例演示——点击某个div后，删除同级的其余div元素：
1、HTML结构
<div class="content">
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
</div>
2、jquery代码
$(function(){
$(".test").click(function() {
$(this).siblings().remove(); // 使用siblings获取被点击元素之外的同级元素，然后使用remove()删除
});
});
3、效果演示
热心网友
时间：2022-04-21 21:19
var aDiv=$("class1");
aDiv.click(function(){
$(this).siblings().hide();
});
热心网友
时间：2022-04-21 23:10
（1）通过查找兄弟节点删除
$('.class1').click(function(){
$(this).siblings('.class1').remove();
})
（2）通过克隆节点，清空main内容
$('.class1').click(function(){
var node = $(this).clone();
$('.main').empty().append(node)
})
其实，jQuery处理节点的方法有很多，可以尽情发挥，对于这题也有不下于5种解决方案，可以尽情发挥。
