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

Question

[Роман Тузов]

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

<!-- ФИЛЬТР -->
	<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>
	<script type="text/javascript">
    function applyFilters() {
    	// Инициализация классов
      var color = $("#filter-color").val();
      var size = $("#filter-size").val();
      // Создания селектора
      var selector = "#items ." + color + "." + size;

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

Answer 1

[FaTaLcheG]

Такой результат требовался?

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

      // Очистка предыдущего запроса
      $("#results").empty();
     
      // Появление нового запроса
      $('#items .item').show();
      $(selector).hide();
    }
  </script>

Comments

[Роман Тузов]

Выходит так, что блоки, которые подходят по фильтру - скрываются, а которые не подходят - остаются. Не то, что нужно. Нужно, чтобы подходящие оставались, а не подходящие удалялись

[Роман Тузов]

Всё, отлично работает, спасибо! Просто нужно поменять местами show и hide:
$('#items .item').hide();
$(selector).show();