【JavaScript】要素を非表示にする3つの方法について詳しく解説します【コピペでOK！】
こんにちは！たけのこです。
今回はJavaScriptで要素を非表示にする方法を３つ紹介します。
また、今回ご紹介する方法は
それぞれ非表示にした際の特徴が違いますので
実装したい内容や仕様に合わせて使い分けて下さい！
それでは早速見ていきましょう！
その１：要素にdisplay:noneを設定する方法
まず１つ目の方法ですが、非表示にしたい要素に「display:none」を設定することで非表示にする方法です。
こちらの方法の特徴としては以下の通りです！
- 要素の存在を無くしている
- 要素自体にCSSを埋め込んでいる
要素に「display:none」を設定することにより、要素の存在自体を無くすことができます。
要素の存在自体消えてしまうと
要素の位置がズレてしまう恐れがありますので
要素の位置が変わってはいけない部分では、使わないようにしましょう！
実装してみると、以下のボタンをクリックしたときのような動きになります！
クリックしたら、文字が消えましたでしょうか？
こちらの実装方法は、以下のコードの
<script>タグから</script>までをコピペし、
id名を変更してあげれば実装できます！
1<div id="AddCode">↓のボタンを押したらこの文字が消えるよ！</div>
2<button onclick="click_AddBtn()">ボタン１</button>
3
4<!-- ここからJavaScript -->
5<script>
6function click_AddBtn ()
7{
8 document.getElementById("AddCode").style.display="none";
9}
10</script>その２：要素自体をremove()で削除する方法
２つ目の方法は、非表示にしたい要素自体を「remove()」で削除する方法です。
こちらの方法の特徴としては以下の通りです。
- 要素自体を削除している
- 再表示ができなくなる
こちらの方法は、
先ほど紹介した「display:none」で非表示にする方法と違い、
要素自体を丸ごと削除するため、
非表示にした後は再表示することができません。
頑張れば再表示させることも出来るけど、コードが冗長してしまうので、再表示をする要素には推奨しません！！
再表示することができないからこそ、
開発者ツールでいじられたくない要素に対して使用するといいかもしれません！
実際に実装してみると、下のボタンをクリックしたときのような動きになります。
こちらもJavaScriptのコードは<script>～</script>の間です。
1<div id="DeleteCode">この文章は１度しか表示しないからね？読んだら↓のボタンで削除して！！</div>
2<button onclick="click_DeleteBtn()">削除ボタン</button>
3
4<!-- ここからJavaScript -->
5<script>
6function click_DeleteBtn (){
7 document.getElementById("DeleteCode").remove();
8}
9</script>また、今回紹介している内容はid名を指定して要素を削除する方法ですが、
「document.getElementsByClassName(class_name);」
というように、クラス名を指定して削除を試みても
クラス番号がうまく採番されず、
指定したクラス名を持つ全ての要素を削除してくれません。
「document.getElementsByClassName(class_name)［1］.remove();」と、クラスの配列番号を指定した場合でも、1番目の要素が削除されないといった事象が起きてしまいます。
対策としましては、
削除したい要素それぞれにid名を割り振って
idごとに要素の削除をする方法しかないため、
もし「指定したクラス名を持つ要素すべてを削除したい！」
と思っている人は、
それぞれの要素にidを割り振ってあげる必要がありますのでご注意ください！
その3：要素にhiddenを設定して非表示にする方法
最後に紹介する方法は、要素にhiddenを設定して非表示にする方法です。
こちらの方法の特徴としては以下の通りです。
- 要素を単に非表示にする
- 「display:none」を設定する方法と特徴はほぼ同じ
こちらの方法は指定した要素に「hidden」属性を埋め込むことで
非表示にしています。
こちらも「display:none」と同様に
非表示にした際に要素の位置がズレてしまう点には、ご注意ください。
単純に非表示にするだけなら、「display:none」を設定する方法のほうが一般的ですね～
また、今回のコードは下記の通りとなります。
こちらもJavaScriptのコードは<script>～</script>の間です。
1<div id="TransparentCode">ボタンを押すとこの文字を透明にするよ！</div>
2<button onclick="click_TransparentBtn()">透明化ボタン</button>
3
4<!-- ここからJavaScript -->
5<script>
6function click_TransparentBtn (){
7 document.getElementById("TransparentCode").hidden = true;
8}
9</script>まとめ
ということで、
今回はJavaScriptで要素を非表示にする3つの方法を紹介しました！
どのやり方でも一応は非表示になりますが、
システムの仕様や実装したい内容に合わせて使い分けていきましょう！
ということで、今回はこのあたりで！ありがとうございました！
