ywork2020.com

Title

要素のカスタムプロパティを削除する

目次 (INDEX)

removePropとは

ここで説明する とは次の語句からなるjQueryのメソッドです。
remove
読み: リムーブ
意味: 削除
prop
読み: プロパティ
意味: 財産、資産、プログラムでは attribute (属性) と同義

目次に戻る

removePropメソッドの概要

このメソッドは、propメソッドを使用して要素につけたカスタムプロパティを削除します。

これはネイティブプロパティ (組み込みプロパティ) を削除するために使用しないでください。 おそらくブラウザの仕様により、ネイティブプロパティを削除できないようになっていると思いますが、 古いブラウザでは、削除される可能性もあります。 仮に、ネイティブプロパティが削除されると、再度追加することはできません。

例えば、要素から checked を削除するならば、 prop("checked", false) を使用するか、 removeAttr("checked") を使用します。

目次に戻る

構文

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

$(Selector).removeProp("customProperty");

目次に戻る

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

ここでは、div要素にカスタムプロパティ myProp を作成し、値を YWORK と設定します。 次に、このカスタムプロパティの値を要素のコンテンツに出力します。

また、サンプルの下にあるボタンをユーザーがクリックすることで myProp を削除し、同じように要素のコンテンツに出力します。 既に、myProp は削除されているので 結果として undefined(参照できない) が出力されます。

サンプルコード: CSS
<style>
	#idButton, #idDiv{
		margin: 1em;
	}
	#idDiv{
		background-color: ##lightblue;
		padding: 1em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div id="idDiv"></div>
	<button id="idButton">Click</button>
	<script>...</script>
</body>
  • 06: div (id="idDiv" の要素です。)
  • 07: button (ボタンです。クリックすると script 06 ~ 11 のコードが実行されます。)
サンプルコード: script
<script>
	$("#idDiv")
		.prop("myProp", "YWORK")
		.text(##String($("#idDiv").prop("myProp")))
	;
	$("#idButton").click(function(){
		$("#idDiv")
			.removeProp("myProp")
			.text(##String($("#idDiv").prop("myProp")))
		;
	});
</script>
  • 02-05: $("#idDiv") (id="idDiv" の要素にメソッドチェーンを実行します。)
  • 03: .prop("myProp", "YWORK") (myProp というカスタムプロパティを作成し、値を "YWORK" と設定します。)
  • 04: .text() (myProp の値をテキストコンテンツとして出力します。)
  • 06-11: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
  • 07-10: $("#idDiv") (id="idDiv" の要素にメソッドチェーンを実行します。)
  • 08: .removeProp("myProp") (myProp というカスタムプロパティを削除します。)
  • 09: .text() (myProp の値をテキストコンテンツとして出力します。結果として参照できるプロパティが存在しないため、undefined が出力されます。)
実行結果:

目次に戻る