ボタンをクリックして特定の div を非表示にするにはどうすればよいですか?

Question

ボタンのonclickイベントを使用して、特定の数のdivを非表示にする方法を探しています。

.toggleClass('.AddCSSClassHere') と関係があるかもしれないことはわかっていますが、実際にはわかりません... div を非表示/表示することはできますが、親 div 固有の div に 1 つ。 jquery は、以前に使用したいと思っていたコード スニペットから来ています。 Hidethis クラス「」を持つすべての div は、[列の表示] ボタンをクリックしたときに表示または非表示にする必要があります

$('button').click(function() {
  $(this).siblings('div').toggleClass('hidethis ');
});

* {
  マージン: 0;
  パディング: 0;
}

html、
体 {
  高さ: 100%;
}

体 {
  背景: #fff;
  パディング: 0;
  マージン: 0;
  フォントファミリー: Myriad-Pro、Arial、「Varela Round」、サンセリフ;
  フォントサイズ: 16px;
}

。引用 {
  高さ: 100%;
  オーバーフロー: 自動;
}

.main-div {
  位置: スティッキー;
  トップ: 0;
}

.header-div {
  ディスプレイ: フレックス;
  パディング: 5px 0;
  背景色: #fff;
}

.titles {
  ディスプレイ: フレックス;
  幅: 100%;
  整列項目: 中央;
}

.通貨情報 {
  幅: コンテンツに合わせて;
  最大幅: 100ピクセル;
  最小幅: 100ピクセル;
  テキスト整列: 中央;
  パディング: 0;
}

。情報 {
  幅: コンテンツに合わせて;
  最大幅: 100ピクセル;
  最小幅: 100ピクセル;
  テキスト整列: 中央;
  パディング: 10px 0;
}

。通貨 {
  最大幅: 70ピクセル;
  最小幅: 70ピクセル;
}

.テーブル情報 {
  ディスプレイ: フレックス;
  フレックス方向: 行;
  フレックスラップ: ラップ;
  幅: 100%;
  オーバーフロー-y: スクロール;
}

.main-div-info {
  ディスプレイ: フレックス;
  テキスト整列: 中央;
  フレックス方向: 行;
  フレックスラップ: ラップ;
  幅: 100%;
}

.div-info {
  ディスプレイ: フレックス;
  フレックス方向: 行;
  フレックスラップ: ラップ;
  幅: 100%;
  パディング: 10px 0;
  整列項目: 中央;
}

.hidethis {
  表示: なし。
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" の整合性="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="crossorigin="anonymous" Referrerpolicy="no-referrer"></script>
<セクションクラス="引用">

  <div class="main-div">
    <div class="header-div">
      <div class="タイトル">
        <div class="通貨情報商品タイトル">
          <button class="show-this-data">列を表示</button>
        </div>
        <div class="通貨情報"></div>
        <div class="通貨情報"></div>
        <div class="通貨情報"></div>
        <div class="currencyinfo Hidethis" style="border-left: 1px Solid #bdbdbd;">ローカル</div>
        <div class="通貨情報を隠す"></div>
        <div class="通貨情報を隠す"></div>
        <div class="通貨情報を隠す"></div>
      </div>
    </div>
  </div>

  <div class="main-div">
    <div class="header-div">
      <div class="タイトル">
        <div class="info product-title">製品名</div>
        <div class="info">ID</div>
        <div class="info">数量</div>
        <div class="info">期間</div>
        <div class="情報を隠す">&nbsp;</div>
        <div class="info Hidethis">単価</div>
        <div class="info Hidethis">単価</div>
        <div class="info Hidethis">ユニット割引</div>
      </div>
    </div>
  </div>
  <div class="main-div">
    <div class="header-div">
      <div class="タイトル">
        <div class="info product-title"><i class="fa fa-chevron-downrotate" aria-hidden="true"></i><a href="#"> ;フルスロットル</a></div>
        <div class="info">&nbsp;</div>
        <div class="info">1.0</div>
        <div class="info">1.0</div>
        <div class="info Hidethis">USD</div>
        <div class="情報を隠す">37.50</div>
        <div class="情報を隠す">0.0</div>
        <div class="情報を隠す">0.0</div>
      </div>
    </div>
  </div>
</section>

Answer 1

ターゲット要素を兄弟として見つけるには、1 レベル上に移動する必要があります。ブロックレベル要素のコンテンツをインデントすると、視覚化が向上します。

すべてのコンテナーでそのような要素をすべて切り替えたい場合は、削除されたときにそれらを追跡する新しいクラスを導入するか、すべてを選択して要素リストを使用する必要があります。 p>

リーリー リーリー リーリー