jQuery

empty（）

と

remove（）

の両方が一致した要素を削除するために使用されますが、前者は一致した要素の子を削除するために使用されます。後者はすべての一致した要素を完全に除去するために使用されます。

例

2 divタグ – “BBox”は “ABox”の子要素です。 

<div class="ABox">
    I'm a A box
    <div class="BBox">I'm a B box</div>
</div>

1. empty（）

empty（）は、 “ABox”コンテンツと “BBox”子要素のみを削除します。 

$('.ABox').empty();

新しい結果は次のようになります: 

<div class="ABox">
</div>

2. remove（）

remove（）はすべての “ABox”と “BBox”要素を完全に削除します。 

$('.ABox').remove();

新しい結果は次のようになります:

…​.//nothing left 

=== 自分で試してみてください

<html>
<head>
<script type=”text/javascript” src=”jquery-1.3.2.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'm a A box
  <div class="BBox">I'm a B box</div>
 </div>

<p>
<button id="empty">empty()</button>
<button id="remove">remove()</button>
<button id="reset">reset</button>
</p>

<script type=”text/javascript”> 

$("#reset").click(function () {
  location.reload();
});

$("#empty").click(function () {

$('.ABox').empty();

});

$("#remove").click(function () {

$('.ABox').remove();

});

</script>
</body>
</html> 

link://wp-content/uploads/jQuery/jQuery-empty-remove-example.html[デモを試してください]

link://tag/jquery/[jquery]link://タグ/jquery-manipulation/[jquery
操作]