思路:获取被点击元素之外的元素,使用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() {
// 使用siblings获取被点击元素之外的同级元素,然后使用remove()删除
$(this).siblings().remove();
});
});
示例二:
1、html
<ul class="user-menu-nav-block">
<a href="me.html">
<li class="user-menu-nav-cur">主页 <span>></span></li>
</a>
<a href="/user/course.html">
<li class="user-menu-nav">我的课程 <span>></span></li>
</a>
<a href="/user/collect.html">
<li class="user-menu-nav">我的收藏 <span>></span></li>
</a>
<a href="/user/info.html">
<li class="user-menu-nav">个人信息 <span>></span></li>
</a>
<a href="/user/qa.html">
<li class="user-menu-nav">答疑 <span>></span></li>
</a>
</ul>
2、jquery代码
$(document).ready(function(){
// 左边导航栏控制
$('.user-menu-nav-block a').click(function(){
$(this).find('li').addClass('user-menu-nav-cur'); //find是获取this下的子元素,即当前点击的元素
$(this).find('li').removeClass('user-menu-nav');
$(this).siblings().find('li').addClass('user-menu-nav');//siblings是获取前被点击元素之外的同级元素
$(this).siblings().find('li').removeClass('user-menu-nav-cur');
});
});