HTMLの条件によって、表示方向が切り替わる実装のコードを教えて下さい。

実現したいこと

・要素①が表示されている時…要素②を表示する
・要素①が表示されていない時…要素②を非表示にする

要素①　HTML

<section>
<div class="item_box related_item detail_inner_box">
<div class="section_title">
<div class="image_title"></div>
</div>
<div class="page_contents clearfix related_item_contents standard_slide">
<div class="slider_box slider" data-auto-height="false" data-autoplay="" data-speed="350" data-slides-per-view="2" data-slides-per-group="2" data-use-breakpoints="true" data-max-cols="4">
<div class="itemlist_box inner_slider_box layout_photo">
<div class="item_list swiper-container column2 max_column4 square_photo_layout swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
<ul class="swiper-wrapper reset_list_style" id="swiper-wrapper-8aaa12e109ace210e" aria-live="polite">
<li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;">
<div class="item_data flex_layout">
<a href="リンクURLが入ります" class="item_data_link">
<div class="inner_item_data">
<div class="list_item_photo slider_image_box">
<div class="inner_list_item_photo">
<div class="global_photo item_image_box itemph_related_item_32">
<img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded">
</div>
</div>
</div>
<div class="list_item_data">
<p class="item_name ellipsis">
<span class="goods_name">商品名が入ります</span>
<span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span>
</p>
<div class="item_info">
<div class="price">
<p class="selling_price">
<span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span>                                                                            </p>
</div>
</div>
</div>
</div>
</a>
</div>
</li>
<li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;">
<div class="item_data flex_layout">
<a href="リンクURLが入ります" class="item_data_link">
<div class="inner_item_data">
<div class="list_item_photo slider_image_box">
<div class="inner_list_item_photo">
<div class="global_photo item_image_box itemph_related_item_32">
<img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded">
</div>
</div>
</div>
<div class="list_item_data">
<p class="item_name ellipsis">
<span class="goods_name">商品名が入ります</span>
<span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span>
</p>
<div class="item_info">
<div class="price">
<p class="selling_price">
<span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span>                                                                            </p>
</div>
</div>
</div>
</div>
</a>
</div>
</li>
<li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;">
<div class="item_data flex_layout">
<a href="リンクURLが入ります" class="item_data_link">
<div class="inner_item_data">
<div class="list_item_photo slider_image_box">
<div class="inner_list_item_photo">
<div class="global_photo item_image_box itemph_related_item_32">
<img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded">
</div>
</div>
</div>
<div class="list_item_data">
<p class="item_name ellipsis">
<span class="goods_name">商品名が入ります</span>
<span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span>
</p>
<div class="item_info">
<div class="price">
<p class="selling_price">
<span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span>                                                                            </p>
</div>
</div>
</div>
</div>
</a>
</div>
</li>
</ul>
<div class="slider_controller lower_slider_controller">
<div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="true"><span class="inner-button-prev"></span></div>
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span></div>
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="false"><span class="inner-button-next"></span></div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
</div>
</div>
</div>
</div>
</section>

要素②　HTML

<div class="related_items">
<h2>
<span class="title_head_space"></span>
<span class="title_text">RELATED ITEMS</span>
<span class="sample9"><div align="center">関連商品</div></span>
<span class="title_end_space"></span>
</h2>
</div>

2022/10/09 00:41

こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。

行動規範の内容に同意します

回答1件

ベストアンサー

デモページを作りました。よければご覧ください。
どちらもJavaScriptは共通で、状況を再現するためにHTMLで要素①②の有無だけ変更しています。

方法

表示・非表示を切り替えるのではなく、要素自体を生成・削除する手法にしました。

要素①、②ともにコンテイナーとして親要素で囲い、
ページが読み込まれた時に、そのコンテイナーの中に要素があるかないかを判断し、

要素①コンテイナーの中に子要素があれば、要素②が生成される
要素①コンテイナーの中に子要素がなければ、要素②コンテイナーの中身が消される

という処理をしています。

表示・非表示にしなかった理由は、表示非表示の切り替えだけだとブラウザのデベロッパツールでhtmlを見た時に、非表示のはずの要素②のコードがユーザーに丸見えになるのでよろしくないからです。

コード例（生成・削除）

html
1<div id="youso1-container">
2  <p>要素①</p>
3</div>
4<div id="youso2-container">
5  <!-- ここに要素②が表示されます -->
6</div>

javascript
1const YOUSO1 = document.querySelector('#youso1-container');
2const YOUSO2 = document.querySelector('#youso2-container');
3
4// 要素②として表示させたいHTMLをかく
5let youso2 = `
6  <p>要素②</p>
7`
8
9// わかりやすくするために、動作を遅延させる用
10window.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });
11
12// ⭐️本番用
13// window.addEventListener('load', showOrHide2);
14
15function showOrHide2() {
16  if (YOUSO1.childElementCount) { // 要素①-containerに子要素がある場合
17    YOUSO2.insertAdjacentHTML('beforeend', youso2); // 要素②を挿入
18  } else { // 要素①に子要素がない場合
19    while (YOUSO2.firstChild) {
20      YOUSO2.removeChild(YOUSO2.firstChild); // 要素②-containerの子要素を全て削除
21    }
22  }
23}

※わかりやすくするために、２秒後に実行するようにしています。
※実際には瞬時に実行してほしいと思うので、遅延用のwindow.addEventListener('load', () => { setTimeout(showOrHide2, 2000) });を削除して、⭐️本番用のコードwindow.addEventListener('load', showOrHide2);をご利用ください。
※要素②の内容は、変数let youso2 =に、シングルやダブルクォテーションではなく、テンプレートリテラルで、生成したいHTMLコードをそのまま書いていただいたらいいです。

コード例（表示・非表示）

それでもやっぱり表示・非表示の切り替えの方がいい！という場合はこちらのJSをご利用ください。
基本は生成・削除と同じで、処理が生成・削除ではなく、displayのblockとnoneを切り替えるだけです。

要素①コンテイナーの中に子要素があれば、要素②コンテイナーをdisplay: block;
子要素がなければ、要素②コンテイナーをdisplay: none;

するという処理をしています。

html
1<div id="youso1-container">
2  <p>要素①</p>
3</div>
4<div id="youso2-container">
5  <p>要素②</p>
6</div>

javascript
1const YOUSO1 = document.querySelector('#youso1-container');
2const YOUSO2 = document.querySelector('#youso2-container');
3
4// わかりやすくするために、動作を遅延させる用
5window.addEventListener('load', () => { setTimeout(showOrHide, 2000) });
6
7// ⭐️本番用
8// window.addEventListener('load', showOrHide);
9
10function showOrHide() {
11  if (YOUSO1.childElementCount) { // 要素①-containerに子要素がある場合
12    YOUSO2.style.display = 'block'; // 要素②を表示
13  } else { // 要素①に子要素がない場合
14    YOUSO2.style.display = 'none'; // 要素②を非表示
15  }
16}