removeAttr とは
- ここで説明する removeAttr とは次の語句からなる jQuery のです。
- remove
- 読み: リムーブ
意味: 削除 - attribute
- 読み: アトリビュート
意味: 属性
removeAttr の概要
このメソッドは、呼び出し元要素の指定した属性を削除します。
つまり、このメソッドを使うと jQuery セレクターで指定した HTML 要素、または要素群の属性を削除することができるということです。
ただし、要素によっては必須とされる属性があり、その属性は削除できない仕様になっていますので注意してください。
また、入力要素などは ユーザーが直接に操作したものには このメソッドは効きません。
これはセキュリティー上の仕様だと思われますが、例えばユーザーが選択したチェック項目の結果を送信ボタンで送信する直前に
意図的にプログラムでチェック項目を操作するなどの行為を防ぐ狙いがあるのではないでしょうか。
これ関しては、このページのサンプルで試していただくと解りやすいと思います。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).removeAttr(attributeName)サンプルコードと実行結果
ここでは input 要素の checkbox 型の要素から checked 属性を削除します。
サンプルでは、ボタンをクリックすると removeAttr() を使って checked 属性を削除する仕様ですが、 自らがチェックボックスを操作してしまうと、このメソッドは機能しなくなります。これは概要のところで述べている理由によるものです。 是非、その辺りも含めてサンプルで動作確認してみてください。
サンプルコード: CSS
<style>
#idButton{
margin-bottom: 5em;
}
#idCheckbox{
height: 60px;
width: 60px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div><button id="idButton"> checked 属性を削除する </button></div>
<div><input type="checkbox" id="idCheckbox" checked></div>
<script>...</script>
</body>
- 06: button id="idButton" (ボタンです。この要素をクリックすることで script コードの 02 ~ 04 行が実行されます。)
- 07: input type="checkbox" id="idCheckbox" checked (チェックボックスです。この要素には 予め checked 属性を付けていますので、初期値ではチェックが入った状態で表示されます。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("#idCheckbox").removeAttr("checked");
});
</script>
- 02-04: $("#idButton").click(function(){ 処理 } (idButton の要素がクリックされると { 処理 } の部分が実行されます。)
- 03: $("#idCheckbox").removeAttr("checked") (idCheckbox の要素から checked 属性を削除します。)