どうやって消す？jQueryで要素を非表示にする方法４つ

2022年9月9日2022年12月16日

DOM要素消したいんだけど、色々あってわからない、、、

オジー

CSSやjQuery/JavaScriptを使うと色々な方法で消せますよね。
今回は導入しやすいjQueryとCSSでの消し方解説します！

今回はjQueryを使用して要素を消す際にどのような方法があるかをご紹介いたします。
jQueryで要素を消す際に使用するメソッドは色々ありますが違いはわかっていますか？

それぞれに特徴がありますので理解した上で使用する事で制作時間を削るだけでなくメンテナンスする際も楽になります。hide(),fadeOut(),css(),addClass()をサンプルコード付きで紹介します。

.hide()

jQuery
$('#kesuyo').hide();

これは単純にそのままの意味ですね。要素を消す際に使用します。指定された要素にdisplay:noneのスタイルがインラインで追加されます。インラインで該当要素にdisplay:block !important;をしてもdisplay:none;で上書きされてしまいます。

ただ、該当要素にクラスを追加し、そこにdiplay:block !important;を指定してあげれば.hide()を打ち消すことができます。（使う機会があるかどうかは別として知っておいて損はないです。）

もしhide()で要素が消えないという人は他のクラスなどでdisplay:block !important;が指定されていないか確認してみてください。!importantがない場合は優先順位上インラインで指定されてるスタイルの方が優先されます。

インラインとかCSSの優先順位がわからない方については下記の記事を御覧ください。

CSS 優先順位の基本・セレクタの優先順位

.fadeOut()

jQuery
$('#kesuyo').fadeOut(5000);

こちらも名前の通りフェードアウトしていきます。消える速度も秒数(ミリ)、fast、 slow、 normalで指定できるので手っ取り早くフェードアウトさせたい場合はこちらをおすすめします。ただ色々な消え方などはできないのでそうしたい方はCSSアニメーションでされた方が良いかと思います。

.addClass()

CSS
.hide{
     display:none;
}

jQuery
$('#kesuyo').addClass('hide');

これ自体で要素を消すことはできませんが、display:none;などを指定したクラスを追加してあげることでクラスが追加された瞬間要素が消えます。
クラスを追加するのでCSSの優先順位を意識しないと他のクラスのdisplayプロパティに負けてdisplay:none;が効かないことがあります。

.css()

jQuery
$('#kesuyo').css("display" , "none");

これはCSSのプロパティを直接いじるのでdisplay:none;を.css()でインラインに追加してあげることで要素を消すことができます。インライン要素となるため!importantを除いて一番優先順位が強いです。

まとめ

今回はjQueryで要素を消す際に用いられるメソッドをご紹介しましたが、やりたいことなどによって適切なメソッドを選べることは制作時間を減らすことにもつながりますのでこれを機にどの方法で要素を消すことができて、今実現しようとしてるにどれが一番適しているかを判断できるようになれるといいですね。

では。

プログラミングのスキルを学ぶのにおすすめの方法

HTML/CSSの基本的な知識があるとWordPressやその他でも流用できておすすめです。今だと書籍で学んでも良いし、スクールに通っても良いし、オンライン講座で勉強しても身に着けることはできます。

料金としてはググる < 書籍 < オンライン講座 < スクールなので、まずは手出しの少ない書籍から始めてみて物足りないようだったら徐々に右に行くのが良いかと思います。いきなりスクールでも良いのですが、教えられること・時間に限りがあるのでどちらにせよ書籍は買って勉強すると思います。

ググっても知識自体は手に入るのですが、断片的に入手するのでどうしても体型的に学ぶことは難しいです。（記事を書いている自分が言うのもなんですが、、、）

オジー

エンジニアのスキルを学ぶ方法でおすすめの書籍やスクールなど紹介しますね！

現役エンジニアによるマンツーマンサポート「DMM WEBCAMP 学習コース」

DMMが運営している「DMM WEBCAMP 学習コース」ですがプログラミングの他に、Webデザインや動画編集、AI・データサイエンスに特化したコースも豊富にあり、学習中・就職のサポート体制も万全です。（さすが大手ですね）

通過率わずか10%の選考を突破した現役エンジニアがサポート
チャットにていつでも質問可能
週に2回のメンタリング
カナダで開発・実践されてきたICEモデルに基づきカリキュラムを独自開発
希望に応じて転職や副業のサポートを無料で受けることができる

どうやって消す？jQueryで要素を非表示にする方法４つ

.hide()

.fadeOut()

.addClass()

.css()

まとめ

プログラミングのスキルを学ぶのにおすすめの方法

おすすめ書籍

おすすめのスクール

就職、転職までサポートの「SAMURAI ENGINEER」

現役エンジニアによるマンツーマンサポート「DMM WEBCAMP 学習コース」

おすすめオンラインコース

Udemy