Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

既存の要素を削除するには? ― remove/emptyメソッド

2016年10月20日

指定した要素そのもの/要素の中身(=子要素)を削除する方法を説明する。

  • このエントリーをはてなブックマークに追加

 既存の要素を削除するには、removeemptyメソッドを利用します。以下では、サンプルを交えながら、それぞれの違いを解説します。

指定された要素を削除するremoveメソッド

 まず、removeメソッドは指定された要素そのものを削除するのがremoveメソッドの役割です。例えば以下は、id="composition"である要素を削除する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<h3 id="composition">弦楽三重奏</h3>
<div id="main">
  <p>ヴァイオリン</p>
  <p>ヴィオラ</p>
  <p>チェロ</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
  $('#composition').remove();
});
</script>
</body>
</html>
リスト1 既存の要素を削除するためのコード(remove.html)
ページのロードが完了すると……

ページのロードが完了すると……

図1 「id=
図1 「id="composition"」である要素を削除

指定された要素の中身を削除するemptyメソッド

 一方、指定された要素そのものではなく、要素の中身(=配下のコンテンツ)を削除するのがemptyメソッドの役割です。

 先ほどのリストの太字部分をemptyメソッドで、以下のように置き換えてみましょう。

JavaScript
$('#composition').empty();
リスト2 指定された要素の中身を削除するためのコード(remove.html)
図2 「id=
図2 「id="composition"」である要素の中身を空に

 確かに外枠(<div>要素)のスタイルはそのままに、中のテキストだけが破棄されていることが確認できます。

処理対象:要素の削除 カテゴリ:要素
API:jQuery() カテゴリ:Core(コア)
API:.remove()|.empty() カテゴリ:Manipulation(操作) > DOM Removal(DOM削除)

※以下では、本稿の前後を合わせて5回分(第54回~第58回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
54. 既存の要素を別の要素で置き換えるには? ― replaceWith/replaceAllメソッド

既存の要素を選択し、それをHTML文字列により生成した新規要素もしくはjQueryオブジェクトで置き換える方法を解説。また結果は同じになるが少し手順を変えて、HTML文字列による新規要素もしくはjQueryオブジェクトで既存の要素を置き換える方法も説明する。

jQuery逆引きリファレンス
55. 現在の要素セットを特定の要素でラップするには? ― wrap/wrapAll/wrapInnerメソッド

現在の要素セットを新要素でラップする(=新要素の子要素にする)方法を解説。メソッドを使い分けることで、要素セットに対して個々に要素全体を/全ての要素をまとめて/個々に中身(=子要素)のみをラップできる。

jQuery逆引きリファレンス
56. 【現在、表示中】≫ 既存の要素を削除するには? ― remove/emptyメソッド

指定した要素そのもの/要素の中身(=子要素)を削除する方法を説明する。

jQuery逆引きリファレンス
57. 既存の要素をコピーするには? ― cloneメソッド

既存の要素をjQueryオブジェクトとして複製する方法を説明。オブジェクトはappendToなどの挿入系メソッドを使ってHTMLソース内に要素として追加したりできる。

jQuery逆引きリファレンス
58. thisキーワードの参照先を固定するには?($.proxy)

文脈により変化するthisキーワードの参照先を、$.proxyメソッドにより固定する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!