jQuery API の empty() は、マッチした要素の、子孫要素、及び、テキストノードを、削除するメソッド。
記述方法
jQuery( セレクター ) . empty();
「セレクター」にマッチする要素の、子孫要素、及び、テキストノードを、削除する。
記述例
jQuery( '.jquery-sample' ) . empty();
クラス名が「jquery-sample」の要素の、子孫要素、及び、テキストノードを、削除する。
実装例（サンプル）
- 項目１
- 項目１－１
- 項目１－２
- 項目１－３
- 項目２
- 項目２－１
- 項目２－２
- 項目２－３
- 項目３
- 項目３－１
- 項目３－２
- 項目３－３
実装例（サンプル）の動作について
「項目１を削除」ボタンをクリックすると、テキストノードである「項目１」と、入れ子になっているリスト要素である「項目１－１」「項目１－２」「項目１－３」を、削除する。項目１のタグは残るので、項目１のリストマークだけが残る。
項目２、項目３も同様。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-1' ) . click( function () {
jQuery( '#jquery-sample-li-1' ) . empty();
} );
jQuery( '#jquery-sample-button-2' ) . click( function () {
jQuery( '#jquery-sample-li-2' ) . empty();
} );
jQuery( '#jquery-sample-button-3' ) . click( function () {
jQuery( '#jquery-sample-li-3' ) . empty();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-1' ) . click( function () {
jQuery( '#jquery-sample-li-1' ) . empty();
} );
jQuery( '#jquery-sample-button-2' ) . click( function () {
jQuery( '#jquery-sample-li-2' ) . empty();
} );
jQuery( '#jquery-sample-button-3' ) . click( function () {
jQuery( '#jquery-sample-li-3' ) . empty();
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-empty {
width: 350px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-sample-empty {
width: 350px;
margin: 10px;
padding: 20px;
background-color: pink;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-sample-empty">
<p>
<button id="jquery-sample-button-1">項目１を削除</button>
<button id="jquery-sample-button-2">項目２を削除</button>
<button id="jquery-sample-button-3">項目３を削除</button>
</p>
<ul id="jquery-sample-ul">
<li id="jquery-sample-li-1">項目１
<ul>
<li>項目１－１</li>
<li>項目１－２</li>
<li>項目１－３</li>
</ul>
</li>
<li id="jquery-sample-li-2">項目２
<ul>
<li>項目２－１</li>
<li>項目２－２</li>
<li>項目２－３</li>
</ul>
</li>
<li id="jquery-sample-li-3">項目３
<ul>
<li>項目３－１</li>
<li>項目３－２</li>
<li>項目３－３</li>
</ul>
</li>
</ul>
</div>
<p>
<button id="jquery-sample-button-1">項目１を削除</button>
<button id="jquery-sample-button-2">項目２を削除</button>
<button id="jquery-sample-button-3">項目３を削除</button>
</p>
<ul id="jquery-sample-ul">
<li id="jquery-sample-li-1">項目１
<ul>
<li>項目１－１</li>
<li>項目１－２</li>
<li>項目１－３</li>
</ul>
</li>
<li id="jquery-sample-li-2">項目２
<ul>
<li>項目２－１</li>
<li>項目２－２</li>
<li>項目２－３</li>
</ul>
</li>
<li id="jquery-sample-li-3">項目３
<ul>
<li>項目３－１</li>
<li>項目３－２</li>
<li>項目３－３</li>
</ul>
</li>
</ul>
</div>