在jquery中empty()和remove()函数都用来移除匹配的元素,前者用来移除匹配元素的后代元素,然而后者用来移除所有匹配的元素及其所有的后代元素。
例子:
如以行的2个div标签,其中BBox是ABox的子标签。
<divclass="ABox">
I'm a A box
<divclass="BBox">I'm a B box</div>
</div>
1 empty()
仅移除ABox的后代元素。
$('.ABox').empty();
结果:
<divclass="ABox">
</div>
2 remove()
移除匹配的所有元素及其后代元素。
$('.ABox').remove();
结果如下:
//nothing left
具体实例:
<html>
<head>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<style type="text/css">
.ABox{
padding:8px;
border:1px solid blue;
}
.BBox{
padding:8px;
border:1px solid red;
}
</style>
</head>
<body>
<h1>jquery empty() and remove() example</h1>
<div class="ABox">
i am a box
<div class="BBox">i am is b box</div>
</div>
<button id="empty">empty()</button>
<button id="remove">remove()</button>
<button id="reset">reset</button>
<script type="text/javascript">
$("#reset").click(function(){
location.reload();
});
$("#empty").click(function(){
$(".ABox").empty();
});
$("#remove").click(function(){
$(".ABox").remove();
});
</script>
</body>
</html>
效果: