<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>13.4jQuery节点的删除方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1 remove()
$('#btn1').click(function(){
//1.1 remove()：从DOM中移除所有匹配元素，包括子元素
//$('ul li').eq(2).remove();
//$('ul li:eq(2)').remove();//通过基本过滤选择器实现
//$('ul li:contains("羽毛球")').remove();//通过内容过滤选择器实现
//$('ul li:nth-child(3)').remove();//通过子过滤选择器实现
//1.2 remove(jQuery表达式)
//$('ul li').remove('li:eq(2)');
//$('ul li').remove('li:contains("羽毛球")');
$('ul li').eq(0).remove();
});
//2 remove()举例 remove()删除备选元素和子元素
$('#btn2').click(function(){
$('#div1').remove();
});
//3 empty():清空节点中所有后代元素
$('#btn3').click(function(){
$('#div2').empty();
});
//将排球移到列表最后
$('#btn4').click(function(){
//var $vBall = $('ul li:contains("排球")').remove();
//$vBall.appendTo('ul');
//等价于
$('ul li:contains("排球")').remove().appendTo('ul');
});
//添加事件
$('#div3').click(function(){alert($(this).html());});
$('#div4').click(function(){alert($(this).html());});
//删除div3追加到Body内
$('#btn5').click(function(){
$('#div3').remove().appendTo('body').html('div3的click方法失效').css({'color':'red','font-size':'16px'});
});
//jQuery支持链式写法
//.detach()删除方法
$('#btn6').click(function(){
$('#div4').detach().appendTo('body').html('div4的click方法生效');
});
});
</script>
<style>
*{ margin:5px;}
#div1,#div2,#div3,#div4{
width:100px;
height:50px;
border:2px solid red;
text-align:center;
}
#div1 p,#div2 p{
background-color:#CCC;
font-size:20px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="remove()方法"><br>
<input type="button" id="btn4" value="删除排球追加到列表最后"><br>
<ul>
<li>乒乓球</li>
<li>排球</li>
<li>羽毛球</li>
<li>网球</li>
<li>篮球</li>
<li>足球</li>
</ul>
<input type="button" id="btn2" value="remove()"><br>
<div id="div1">
<p>div内的p</p>
</div>
<input type="button" id="btn3" value="clear()">
<div id="div2">
<p>div内的p</p>
</div>
<!--删除后再添加，事件是否存在？-->
<input type="button" id="btn5" value="remove().appendTo()事件不存在"><br>
<div id="div3">div3</div>
<input type="button" id="btn6" value="detach().appendTo()事件行为存在"><br>
<div id="div4">div4</div>
</body>
</html>
效果图
单击”remove()方法“按钮
单击”删除排球追加到列表最后“按钮
单击”remove()“按钮
单击”clear()“按钮
单击”remove().appendTo()事件不存“按钮
单击”detach().appendTo()事件行为存在“按钮
