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

この記事を書いてる人

オジー

  • WordPress歴8年
  • 副業でデザイン/開発を受託→法人化
  • WordPressで会社HPをオリジナルテーマで作成
  • 主軸はデザイン、たまにフロントエンドのコードも書きます
  • 事業会社/受託会社 両方経験あり

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やその他でも流用できておすすめです。今だと書籍で学んでも良いし、スクールに通っても良いし、オンライン講座で勉強しても身に着けることはできます。

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

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

オジー

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

おすすめ書籍

おすすめのスクール

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

日本で初めてマンツーマンでのプログラミング指導を導入したプログラミング塾「SAMURAI ENGINEER」ですが、専属のインストラクターとのWeb面談のレッスンを通じてプログラミングやWebデザインのスキルを身につけてられ、就職や転職、案件の獲得の方法などをマンツーマンでサポートする体制も整っています。

  • 転職成功率98%
  • レッスン満足度No.1
  • 累計指導実績35,000名以上
  • 挫折率8%
侍エンジニア塾

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

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

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

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

Udemy

オンラインコースで有名どころののUdemyですが、プログラミング、マーケティング、データサイエンスなど、213,000以上のコースを5,700万人の受講生が学んでいます。

  • オンラインですべて完結
  • 豊富なジャンル
  • 一つを買い切り型(一気にお金を払う必要はない)
  • セールも頻繁に開催される
  • Q&A機能で講師に質問可能
  • 動画のお試し視聴

Amazon Kindleのように購入前に評価が見れたり、講座を購入する前に動画のお試し視聴が可能だったりと失敗しないようなサービス設計になっているのがポイント高めです。

Udemyを試してみる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次