jquery：empty()

このメソッドの説明

empty()はjQueryメソッドです。

要素の中身(子要素)を空にする時に利用します。

メソッド

セレクタ.empty()

パラメータ

なし

利用例

下記事例は、セレクト要素の中身を[中サイズから大サイズ]に書き直すサンプルです。

選択肢を確認後、更新ボタンを挿入して下さい。

上記プログラムは下記から構成されています。

1.HTML

<input type='hidden' class='option_data' name='ウェストサイズ(大)' value='80,84,88'> <!-- ①HTMLからjQueryに受け渡すデータ-->
<div class='option_title'>ウェストサイズ(中)</div> <!-- ②タイトルエリア -->
<select class='select_class'> <!-- ③セレクトBOXのデータです。これを書き換えます -->
	<option value='#none#'>選択してください</option> 
	<option value='70'>70</option> 
	<option value='74'>74</option> 
	<option value='78'>78</option> 
</select>
<br>
<div style='display:flex;'>  <!-- ④操作ボタン -->
	<button class='edit_button' style='margin-top:10px;'>更新</button>
	<button class='reset_button' style='margin-top:10px;margin-left:10px;'>リセット</button>
</div>
<div class='message' style='color:red;'></div>  <!-- ⑤メッセージエリア -->

①inputタグの[type='hidden'] で、HTMLからjQueryに受け渡すデータを定義しています。

②タイトルエリアです。

これをjQueryでウエストサイズ(大)に書き換えます。

③デフォルトのセレクトデータは70、74、78です。

これをjQueryで80、84、88に書き換えます。

④更新ボタンとリセットボタンを配置しています。

⑤更新した時にメッセージを表示するエリアです。

2.jquery

更新ボタンが押されたら、セレクトBOXのエリアを空にして書き換えます。

$(function(){
	$('.edit_button').click(function(){
		var option_title	= $('.option_data').attr('name'); // ①オプションタイトルの取得
		var option_data = $('.option_data').attr('value');  // オプションデータの取得
		$('.option_title').text(option_title);      // オプションタイトルの書き換え
		var option_list = option_data.split(','); // ②オプションデータを配列(添字配列)に変換する
		$('.select_class').empty();                  // ③オプションを空にする
		$('.select_class').append('<option value="#NONE#">選択してください</option>');
		for (var item of option_list) {  // ④for of メソッドで配列から1個ずつ呼びだして処理しています
			$('.select_class').append('<option value="'+ item + '">' + item + '</option>');
		}
		$('.message').text('オプションデータを更新しました。データを確認して下さい。'); // メッセージの出力
	});
	$('.reset_button').click(function(){
		location.reload();  // ⑤画面を再ロードしています。
	});
});

①attr()は、HTMLの属性値を取得するメソッドです。詳細はリンク先を見て下さい。

②split()は、文字列を指定した区切り文字で分割して配列にするメソッドで、詳細はリンク先を見て下さい。

③empty()は、このドキュメント対象メソッドで、子要素を空にします。

④for of メソッドは、配列から1個ずつ呼びだして処理メソッドで、詳細はリンク先を見て下さい。

append()は、子要素の最後に追加するメソッドで、詳細はリンク先を見て下さい。

⑤location.reload()は、画面をリフレッシュするメソッドです。詳細はリンク先を見て下さい。

<input type='hidden' class='option_data' name='ウェストサイズ(大)' value='80,84,88'>

<span class='option_taget' option_name='my_option' option_data='80,84,88'></span>
又は
<div class='option_taget' option_name='my_option' option_data='80,84,88'></div>