指定した要素を削除したい場合、jQueryにはempty()とremove([expr])の2つのメソッドが用意されていますが、どちらも要素を削除しますが、
emptyメソッド
厳密に言えば、 empty() メソッドはノードを削除しませんが、要素内のすべての子孫ノードをクリアできます
empty は自身のノードを削除できません
remove メソッド
このノードとこれに含まれるすべての子孫ノードノードも同時に削除されます
指定されたコレクション内の要素を削除するフィルター式を提供します
以下では、コードを使用して詳細に分析します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>remove()与empty()的区别</title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style type="text/css">
#dv1{
width:250px;
height:250px;
background:red;
float:left;
}
#dv2{
width:250px;
height:250px;
background:green;
float: left;
margin-left:5px;
margin-right:5px;
}
</style>
</head>
<body>
<div id="dv1">
<p>元素1</p>
<p>元素2</p>
</div>
<div id="dv2">
<p>元素3</p>
<p>元素4</p>
</div>
<input type="button" value="empty" id="but1">
<input type="button" value="remove" id="but2">
<script>
$("#but1").click(function(){
$("#dv1").empty();
})
$("#but2").click(function(){
$("#dv2").remove();
})
</script>
</body>
</html> 上記のコードは、実行後、次のことがわかります空をクリックすると、要素 1 と要素 2 はクリアされますが、div はまだ存在します
削除をクリックすると、内部の要素が削除されるだけでなく、div 自体も削除されます
次のセクション