官方资料
jQuery.empty()
empty()
删除匹配元素(集)的全部子元素,该方法不接受任何参数。empty()
不仅移除子元素、后代元素,也移除匹配元素内部的文本内容。
empty()
在移除子元素之前会先移除子元素上的数据和事件处理。如果你想移除元素而又不想破坏它的数据结构或事件处理(以便这些元素稍后可以再次添加),我们可以使用detach()
代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.2.4.js"></script>
</head>
<body>
<ul>
<li>方案 1<span>测试效果</span></li>
<li>方案 2<span>测试效果</span></li>
<li>方案 3<span>测试效果</span></li>
<li>方案 4<span>测试效果</span></li>
<li>方案 5<span>测试效果</span></li>
</ul>
<button id="span">删除span</button>
<button id="li">删除li</button>
<button id="detach">使用detach</button>
<button id="add">添加被detach删除的数据</button>
</body>
<script type="text/javascript">
$(function(){
$("#span").on("click",function(){
$("ul li span").empty();
});
$("#li").on("click",function(){
$("ul").empty();
});
$("ul").on("click","li",function(){
alert($(this).text());
})
var data = null;
$("#detach").on("click",function(){
data = $("ul").detach();
});
$("#add").on("click",function(){
$("body").prepend(data);
data = null;
});
})
</script>
</html>
在使用上面的demo查看效果时请打开开发者工具,注意观察代码的变化