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

どうも、もう更新が月一にあるかないかのペースですが頑張って更新しています。ビザ申請のための書類作成やフリーランスの仕事などバタバタして書く時間をまったく作れませんでした。幸運なことにアクセスは記事を書いてなくても伸び続けているので良かったです。

今回はjQueryを使用して要素を消す際にどのような方法があるかをご紹介いたします。
jQueryで要素を消す際に使用するメソッドは色々ありますが違いはわかっていますか? それぞれに特徴がありますので理解した上で使用する事で制作時間を削るだけでなくメンテナンスする際も楽になります。hide(),fadeOut(),css(),addClass()をサンプルコード付きで紹介しています。

.hide()

これは単純にそのままの意味ですね。要素を消す際に使用します。指定された要素にdisplay:noneのスタイルがインラインで追加されます。インラインで該当要素にdisplay:block !important;をしてもdisplay:none;で上書きされてしまいます。ただ、該当要素にクラスを追加し、そこにdiplay:block !important;を指定してあげれば.hide()を打ち消すことができます。(使う機会があるかどうかは別として知っておいて損はないです。)

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

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

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

.fadeOut()

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

.addClass()

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

.css()

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

まとめ

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

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。