Как очищать блоки, которые не подошли по фильтру?

Question

Как мне очищать блок, который не подошёл мне по фильтру и показывать лишь тот, который подошёл? Имеется вот такой код:

  function applyFilters() {
    // Инициализация классов
    var color = $("#filter-color").val();
    var size = $("#filter-size").val();
    // Создания селектора
    var selector = "#items ." + color + "." + size;

    // Очистка предыдущего запроса
    $("#results").empty();
    // Появление нового запроса
    $("#results").append($(selector).clone());
  }

<!-- ФИЛЬТР -->
  <div class="filters">

    <span>Color</span>
    <select id="filter-color">
      <option value="item">все</option>
      <option value="red">красный</option>
      <option value="blue">синий</option>
      <option value="green">зелёный</option>
      <option value="orange">оранжевый</option>
      <option value="yellow">жёлтый</option>
    </select>

    <span>Размер</span>
    <select class="" id="filter-size">
      <option value="56">56</option>
      <option value="58">58</option>
      <option value="60">60</option>
      <option value="62">62</option>
    </select>

    <button type="button" class="btn btn_access" onclick="applyFilters()">Применить фильтр</button>
  </div>
  <!-- КОНЕЦ ФИЛЬТРА -->
  
  <!-- КОНТЕНТ -->
  <span>All</span>
  <div id="items">
    <div class="item red 54">1</div>
    <div class="item blue">2</div>
    <div class="item red 60">3</div>
    <div class="item green">4</div>
    <div class="item red 60">5</div>
    <div class="item orange">6</div>
    <div class="item green">7</div>
    <div class="item yellow 56">8</div>
    <div class="item green">9</div>
    <div class="item orange">10</div>
    <div class="item yellow">11</div>
    <div class="item blue 54">12</div>
    <div class="item green">13</div>
    <div class="item orange 56">14</div>
    <div class="item blue 60">15</div>
    <div class="item orange 56">16</div>
    <div class="item red 54">17</div>
    <div class="item yellow">18</div>
  </div>

  <span>Results</span>
  <div id="results">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

Решил вопрос следующим кодом javascript:

function applyFilters() {
    // Инициализация классов
  var color = $("#filter-color").val();
  var size = $("#filter-size").val();
  // Создания селектора
  var selector = "#items ." + color + "." + size;

 
  // Появление нового запроса
  $('#items .item').show();
  $(selector).hide();
}

БЛОГ НА HUSL

Как очищать блоки, которые не подошли по фильтру?

Ответы (1 шт):