Removing nested classes in tab elements?

Question

JavaScript

There is a set of tabs, in which, in addition to the appearance of the tabs themselves, the internal elements of these tabs appear.

<div class="tabs-nav">
    <ul>
      <li class="inject" data-type="tab-1">All projects</li>
      <li class="inject" data-type="tab-2">Buildings</li>
      <li class="inject" data-type="tab-3">Interior design</li>
      <li class="inject" data-type="tab-4">Isolation</li>
      <li class="inject" data-type="tab-5">Plumbing</li>
      <li class="inject" data-type="tab-6">Tiling</li>
    </ul>
  </div>
  <div class="tabs-content">
    <ul>
      <li class="tab-el tab-1 el-1">
        <div class="project tab-1 project-1"></div>
        <div class="project tab-1 project-2"></div>
        <div class="project tab-1 project-3"></div>
        <div class="project tab-1 project-4"></div>
        <div class="project tab-1 project-5"></div>
        <div class="project tab-1 project-6"></div>
        <div class="project tab-1 project-7"></div>
        <div class="project tab-1 project-8"></div>
      </li>
      <li class="tab-el tab-2 el-2">
        <div class="project project-1 tab-2"></div>
        <div class="project project-2 tab-2"></div>
        <div class="project project-3 tab-2"></div>
        <div class="project project-4 tab-2"></div>
        <div class="project project-5 tab-2"></div>
        <div class="project project-6 tab-2"></div>
        <div class="project project-7 tab-2"></div>
        <div class="project project-8 tab-2"></div>
      </li>
      <li class="tab-el tab-3 el-3">
        <div class="project project-1 tab-3"></div>
        <div class="project project-2 tab-3"></div>
        <div class="project project-3 tab-3"></div>
        <div class="project project-4 tab-3"></div>
        <div class="project project-5 tab-3"></div>
        <div class="project project-6 tab-3"></div>
        <div class="project project-7 tab-3"></div>
        <div class="project project-8 tab-3"></div>
      </li>

$('.inject').on('click', function(event){
      event.preventDefault();

      $(this).addClass('tab-color').siblings().removeClass('tab-color');
      var selected_member = $(this).data('type');
      $('.tab-el.'+selected_member+'').addClass('appear').siblings().removeClass('appear');
      $('.tab-el.'+selected_member+'').find('.project').addClass('appear');

Question: how to make it so that when you click on another tab, not only the tabs themselves, except for the current one, disappear, but also their nested ".project" elements, or rather lose the ".appear" class?

Answer 1

Add
Even so:

$('.inject').on('click', function(event){
      event.preventDefault();

      $(this).addClass('tab-color').siblings().removeClass('tab-color');
      var selectedTab = $('.tab-el.'+$(this).data('type'));
      selectedTab.closest('ul').find('.appear').removeClass('appear');
      selectedTab.addClass('appear').find('.project').addClass('appear');