実現したいこと・現在の仕様

今回、実現させたいことは、次の2.の箇所です。1.はすでにできました。
HTMLは動的に生成されたものです。
簡単なようでなかなかできず、教えていただけたらと思います。

liをクリックしたら、クリックした現在のliタグとその親であるulタグにそれぞれactiveというクラスがつく

<h2>赤色</h2>
<div>
<ul class="card-list active">
    <li data-name="赤色" class="active">りんご</li>
</ul>
</div>
<h2>黄色</h2>
<div>
<ul class="card-list">
    <li data-name="黄色">バナナ</li>
</ul>
</div>
<h2>紫色</h2>
<div>
<ul class="card-list">
    <li data-name="紫色">ぶどう</li>
</ul>
</div>

2.　下の「バナナ」をクリックしたら、クリックした現在の要素（li,ul）にactiveクラスがつき（この部分は実現できました）、1.でクリックした「りんご」のli、親のulはremoveClassで削除されるようにしたい（このやり方を知りたいです）
その後、「ぶどう」をクリックしたら、「バナナ」が書かれた要素のクラス（ul,ul）は削除されるようにしたい

<h2>赤色</h2>
<div>
<ul class="card-list">
    <li data-name="赤色">りんご</li>
</ul>
</div>
<h2>黄色</h2>
<div>
<ul class="card-list active">
    <li data-name="黄色" class="active">バナナ</li>
</ul>
</div>
<h2>紫色</h2>
<div>
<ul class="card-list">
    <li data-name="紫色">ぶどう</li>
</ul>
</div>

コード

javascript
1const card = ["赤色","黄色","紫色"];
2
3card.forEach((value) => {
4    $('.card-list').find('[data-name="'+value+'"]').addClass('active');
5
6    $(document).on('click', '.card-list [data-name="'+value+'"]', function(){
7        $(this).addClass('active');
8        $(this).parents('.card-list').addClass('active');
9        $('li').not('[data-name="'+value+'"]').removeClass('active');
10    })
11});

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

回答1件

ベストアンサー

こんにちは

<li> がクリックされたら、まずactiveであるすべての要素からactive クラスを削除してから、クリックされた<li> とその親である<ul> を active にする、という考え方で、以下でいかがでしょうか？

javascript
1$('li').click(function() {
2  $('.active').removeClass('active');
3  $(this)
4    .addClass('active')
5    .parent()
6    .addClass('active');
7});