当选择另一个过滤器时，删除过滤器项的活动类

Question

我有一些JavaScript可以过滤产品。首先，选择“全部”选项。 这是过滤器下拉列表的html：

<div class="filter tags Filter-1" id="filter-1">
  <span class="filter-label">Filter 1</span>
  <div class="filter-list">
    <div class="all filter-item active"><a href="#" title="">All </a></div>
    <div class="filter1 filter-item item-2"><a href="#" title="Remove tag Filter 1">Filter1</a></div>
    <div class="filter2 filter-item item-2"><a href="#" title="Remove tag Filter 2">Filter2</a></div>
    <div class="filter3 filter-item item-2"><a href="#" title="Remove tag Filter 3">Filter 3</a></div>
  </div>
</div>

还有JS：

$(function() {
  var popped = ('state' in window.history && window.history.state !== null),
    initialURL = location.href;

  //function to handle the scenarios where back and forward buttons used in browser
  $(window).bind("popstate", function(e) {
    // Ignore inital popstate that some browsers fire on page load
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if (initialPop) {
      return;
    }
    ajaxLoadPage(location.href);
  });

  //the ajax function that does the AJAX calls to get the products and load them into the grid
  var ajaxLoadPage = function(url) {
    $.ajax({
      type: 'GET',
      url: url,
      data: {},
      complete: function(data) {
        $('#collection').html($("#collection", data.responseText).html());
        history.pushState({
          page: url
        }, url, url);
      }
    });
  }

  { % capture pathUrl %
  } { %
    if collection.handle %
  } { % capture url %
  }
  /collections/ {
    {
      collection.handle
    }
  } { % endcapture %
  } {
    {
      url
    }
  } { % elsif collection.all_products_count > 0 and collection.products.first.type == collection.title %
  } {
    {
      link_to_type
    }
  } { % elsif collection.all_products_count > 0 and collection.products.first.vendor == collection.title %
  } {
    {
      link_to_vendor
    }
  } { % endif %
  } { % endcapture %
  }

  var collectionUrl = window.location.protocol + '//' + window.location.hostname + '{{ pathUrl}}';

  //this detects one of the filters being clicked that should then
  //decide what URL to call in order to get the newly filtered product grid
  $("#filter-1 .filter-list .filter-item a, #filter-2 .filter-list .filter-item a").click(function(event) {
    event.preventDefault();
    var title = $(this).attr('title');
    var self = this;

    // check if the click is on a "remove tag" filter
    var isRemoveFilter = false;
    if ($(this).parent().hasClass('active')) {
      $(this).parent().removeClass('active');
      $(this).removeAttr('title');
      isRemoveFilter = true;
    } else if ($(this).parent().hasClass("all")) {
      //check if "all brands" or "all colors" clicked
      var ul = $(this).parent().parent();
      $('.filter-item', ul).removeClass('active');
      $('.filter-item a', ul).removeAttr('title');
      isRemoveFilter = true;
    } else {
      //otherwise it means click on an unfiltered tag
      //remove other "Remove tag" in same filter row
      var ul = $(this).parent().parent();
      $('.filter-item', ul).removeClass('active');
      $('.all.filter-item', ul).removeClass('active');
      $('.filter-item a', ul).removeAttr('title');

      //add the active tag onto the new filter that was clicked
      $(this).parent().addClass('active');
      $(this).attr('title', 'Remove tag ' + $(this).text());
    }

    var activeBrand = '';
    if ($('#filter-1 ul .filter-item.active a').length > 0) {
      activeBrand = $('#filter-1 .filter-list .filter-item.active a').text();
    }
    var activeColor = '';
    if ($('#filter-2 ul .filter-item.active a').length > 0) {
      activeColor = $('#filter-2 .filter-list .filter-item.active a').text();
    }

    var selectedBrand = '';
    if ($(this).parents().hasClass('brands') && !isRemoveFilter) {
      selectedBrand = $(this).text();
    }
    var selectedColor = '';
    if ($(this).parents().hasClass('colors') && !isRemoveFilter) {
      selectedColor = $(this).text();
    }

    //console.log('activeBrand = ' + activeBrand);
    //console.log('activeColor = ' + activeColor);
    //console.log('selectedBrand = ' + selectedBrand);
    //console.log('selectedColor = ' + selectedColor);

    var url = $(this).attr('href');

    var newBrand = selectedBrand || activeBrand;
    var newColor = selectedColor || activeColor;
    //console.log('newBrand = ' + newBrand);
    //console.log('newColor = ' + newColor);

    url = collectionUrl + "/";

    if (newBrand != '' && newColor != '') {
      url += newBrand + "+" + newColor;
    } else if (newColor != '') {
      url += newColor;
    } else if (newBrand != '') {
      url += newBrand;
    }
    //console.log(url);
    ajaxLoadPage(url);

  });

});

因此，基本上，我要尝试的是选择另一个不是“全部”过滤器的元素时，它需要从“全部”过滤器中删除.active类。 如您所见，我已经尝试使用此功能：

 $('.all.filter-item', ul).removeClass('active');

但是它不会删除该类。任何想法如何实现这一目标？