ywork2020.com

Title

要素のコンテンツを空にする

目次 (INDEX)

empty とは

ここで説明する empty とは次の語句からなる jQuery のメソッドです。
empty
読み: エンプティ
意味: 空、からっぽ、中身がない、欠けている

目次に戻る

empty メソッドの概要

このメソッドは、呼び出し元要素のコンテンツを削除し、空にします。

これは JavaScript で要素の innerHTML プロパティに空の値を代入することと同じ効果があります。 また、 jQuery の html() メソッドで要素の中身を空にするのとも同じです。

jQuery の empty() を使う利点としては、jQuery セレクターが使えるところでしょう。 JavaScript では id や class から要素を特定するような、少し面倒な手続きを jQuery では セレクターを使って手軽に利用できることはとても魅力的です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

このメソッドは引数を受け付けません。

$(Selector).empty()

目次に戻る

サンプルコードと実行結果

ここでは、 class 属性に clsOutput の値を持つ要素を 2つ用意しました。

この要素らのコンテンツを empty() メソッドを使って空にしてみます。

サンプルコード: CSS
<style>
	display: block;
	background-color: ##khaki;
	border: thin solid ##darkgray;
	font-size: 110%;
	height: 2em;
	margin: 1em 0;
	padding: 0 1em;
	width: 30%;
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output class ="clsOutput"> content , content </output>
	<output class ="clsOutput"> content , content </output>
	<br>
	<button id="idButton"> click </button>
	<script>...</script>
</body>
  • 06, 07: output class ="clsOutput" (出力要素です。結果を表示するために使用します。)
  • 09: button id="idButton" (ボタン要素です。クリックされると script コードの 02 ~ 04 行目が実行されます。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$(".clsOutput").empty();
	});
</script>
  • 02-04: $("#idButton").click(function(){ 処理 } (idButton の要素がクリックされると { 処理 } の部分が実行されます。)
  • 03: $(".clsOutput").empty() (class 属性に clsOutput の値をもつ要素のコンテンツを空にします。)
実行結果:
content , content content , content

目次に戻る