jQueryを用いた再帰的な要素の削除

Question

達成したいこと

下記のHTML_AからHTML_Bのみ残すためにjQueryを用いて特定の要素を削除(または不可視化)したいと考えています。

<!-- HTML_A　-->
<ul class="item_all">
  <li class="item_a">Ａ
    <ul>
    <li>Ａ－１
      <ul>
      <li>Ａ－１－１</li>
      <li>Ａ－１－２</li>
      <li>Ａ－１－３</li>
      </ul>
    </li>
    <li>Ａ－２
      <ul>
      <li>Ａ－２－１</li>
      <li>Ａ－２－２</li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="item_b">Ｂ
    <ul>
    <li>Ｂ－１
      <ul>
      <li>Ｂ－１－１</li>
      <li>Ｂ－１－２</li>
      </ul>
    </li>
    </ul>
  </li>
  <li class="item_c">Ｃ
    <ul>
    <li>Ｃ－１
      <ul>
      <li>Ｃ－１－１</li>
      <li>Ｃ－１－２</li>
      </ul>
    </li>
    <li>Ｃ－２
      <ul>
      <li>Ｃ－２－１</li>
      </ul>
    </li>
    <li>Ｃ－３
      <ul>
      <li>Ｃ－３－１</li>
      <li class="target">Ｃ－３－２</li>
      <li>Ｃ－３－３</li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

<!-- HTML_B　-->
<ul class="item_all">
  <li class="item_c">Ｃ
    <ul>
    <li>Ｃ－３
      <ul>
      <li class="target">Ｃ－３－２</li>
      </ul>
    </li>
    </ul>
  </li>
</ul>

実践したこと

jQueryを用いて$('要素').remove()を繰り返すことを考えましたが、それを再帰的に実施する方法までたどり着きませんでした。

お忙しいところお手数ですが、ご協力お願いいたします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[basicemkk]

$('.item_a', 'item_b').remove();
でできないでしょうか？

[ponyo877]

>kei344さん
失礼しました修正します。
>basicemkkさん
質問の説明がかけていました。こちら複数の子要素に対して更に複数の子要素が連なるような状況で特定の子要素とその先祖のみを残すように他の要素を削除するためにはどうしたら良いのかという抽象的な質問になります。そのため、上記解答よりも具体的な解法を求めています。

Answer 1

こんにちは

再帰を使わなくても、以下でいけるのではと思います。

$('li').filter(
    (i, el) => !$(el).hasClass('target') && $('li.target', el).length === 0
).remove();

以下、上記を使ったサンプルです。削除ボタンをクリックすると、HTML_Bの状態になる想定です。

• 動作確認用Repl.it: https://codepen.io/jun68ykt/pen/yLyrbvw?editors=1011

Comments

[ponyo877]

ありがとうございます。codepenで理解が助かりました。

[jun68ykt]

どういたしまして、解決されたようでよかったです????