解決したいこと特定の子要素が存在しない場合、親要素を非表示にしたいです。具体的な構成は以下です。該当するソースコード <section id ="hoge_main"> ...

@marumarukoposted at 2023-02-02

特定の子要素が存在しない場合、親要素を非表示にしたい

Q&A

Closed

HTML CSS JavaScript jQuery

解決したいこと

特定の子要素が存在しない場合、親要素を非表示にしたいです。

具体的な構成は以下です。

該当するソースコード

<section id ="hoge_main">
 <p class ="titile">タイトル</p>
  <div class ="hoge_content">
  <div class ="hoge_menu">
    <a href="">
      <img src="">
       <p>...</p>
       <p>...</p>
       <p>...</p>
    </a>
  </div>
  </div>
</section>

「hoge_menu」はGoogleタグマネージャで差し込んでいる部分になるのですが、
この部分が差し込まれいない場合、「titile」となる部分を非表示にしたいです。

自分で試したこと

セレクタだけでやってみたのですが、「hoge_menu」が差し込まれた時もタイトルが消されてしまいました。
＄（".title:not(:has(.hoge_menu))"）.hide();

ご教授のほどよろしくお願いいたします。

1Answer

@YottyPG posted at 2023-02-02

hoge_menuはtitleの子要素ではないので、現状セレクタが効いていないです。
以下のように、「hoge_menuを持たないhoge_mainの中のtitle」というようなセレクタにすると効くようになると思います。

$("#hoge_main:not(:has(.hoge_menu)) .title").hide();

See the Pen Untitled by yotty (@yotty) on CodePen.

また、記載していただいてるソースに誤字があったのでご注意ください。

- <p class ="titile">タイトル</p>
+ <p class ="title">タイトル</p>

0Like

Comments

@marumaruko
Questioner
ご回答いただきありがとうございます。
確認してみたところ、「hoge_menu」が差し込まれていない状態でも「title」が表示されてしまいまいした。
他に方法はありますでしょうか？
@YottyPG
処理全体の流れがわからないので念のための確認ですが、
「hoge_menu」が差し込まれた後に、hide()の処理が実行されるような処理順になっていますでしょうか？

また、最初から表示したくないということであれば、CSSで「display:none;」などを指定してあげて非表示にするのも1つの手だと思います。

#hoge_main:not(:has(.hoge_menu)) .title{
display:none;
}
@marumaruko
Questioner
hide()の時間を遅らす処理を追加したところ、問題なく「title」が削除されました。
ご丁寧に追記ありがとうございます。
@YottyPG
解決したようでよかったです！

Are you sure you want to delete the question?