從dom中刪除項目，然後再次使用

Question

這是很難解釋，但基本上我有一個更改事件，將根據圖像的ALT值篩選列表中的項目。它工作正常，但我想每次發生更改事件（或具有活動類的項目）時從dom中徹底刪除非活動項目。有人能解釋我哪裏可能會出錯嗎？

注：我已經註釋掉了該函數正常工作所不需要的代碼。

請忽略HTML中的活動類。我在頁面加載時已經有了它。

function projectFilter(){ 

    $('#filter').on('change', function(){ 
     var value = $(this).val(); 
     $('.projects li').each(function(){ 


//**This section I am unsure about**. 
      /*if($(this).hasClass('active')){ 
       var store = $(this); 
       store.appendTo(); 
      } else{ 
       $(this).remove(); 
      }*/ 


      console.log($(this)); 
      var alt = $(this).find('img').attr('alt'); 
      var split = alt.split(' '); 
      var lower = split[0].toLowerCase(); 
      if(lower == value){ 
       $(this).addClass('active'); 
      } else{ 
       $(this).removeClass('active'); 
      } 
     }); 
//**This part just displays a message if no results are found.** 
     /* 
     var active = $('.projects .active').length; 
     if(active > 0){ 
      $('p.no-results').removeClass('active'); 
     } else{ 
      $('p.no-results').addClass('active'); 
     } 
     */ 
    }); 
} 



<div class="content projects"> 
     <div class="row long"> 
      <h1>Projects</h1> 
      <div class="p-filter"> 
       <form class="cf"> 
        <select name="filter" id="filter" class="filter right"> 
         <option>---</option> 
         <option value="corporate">Corporate</option> 
         <option value="education">Education</option> 
         <option value="healthcare">Healthcare</option> 
         <option value="residential">Residential</option> 
         <option value="religious">Religious</option> 
        </select> 
        <!-- <input type="text" name="search" id="search" class="search"> 
        <input type="submit" value="Search"> --> 
       </form> 
      </div> 
      <div class="col_08"> 
       <p class="no-results">No results exist. Please choose another selection.</p> 
       <ul class="cf"> 
    <li class="active odd"><a href="/assets/img/misc/carpentry/saks_2.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 2" src="/assets/img/misc/carpentry/saks_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/carpentry/saks_3.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 3" src="/assets/img/misc/carpentry/saks_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/carpentry/saks_4.jpg" class="fancybox" rel="gallery"><img alt="Corporate - Saks Fifth Avenue 4" src="/assets/img/misc/carpentry/saks_4.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia" src="/assets/img/misc/carpentry/st_teresa_of_avilia_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/university_saint_mary_boathouse_1.jpg" class="fancybox" rel="gallery"><img alt="Education - University of Saint Mary on the Lake Boathouse 1" src="/assets/img/misc/masonry/university_saint_mary_boathouse_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/university_saint_mary_boathouse_2.jpg" class="fancybox" rel="gallery"><img alt="Education - University of Saint Mary on the Lake Boathouse 2" src="/assets/img/misc/masonry/university_saint_mary_boathouse_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/century_tower_1.jpg" class="fancybox" rel="gallery"><img alt="Residential - Century Tower" src="/assets/img/misc/masonry/century_tower_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/catholic_charities_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Catholic Charities" src="/assets/img/misc/masonry/catholic_charities_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/newark_electronics_1.jpg" class="fancybox" rel="gallery"><img alt="Residential - Century Tower" src="/assets/img/misc/masonry/newark_electronics_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/holy_family_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Family" src="/assets/img/misc/masonry/holy_family_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/saint_mary_lake_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Saint Mary of the Lake 1" src="/assets/img/misc/masonry/saint_mary_lake_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/saint_mary_lake_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Saint Mary of the Lake 2" src="/assets/img/misc/masonry/saint_mary_lake_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/ss_cyril_methodist_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - SS Cyril Methodist" src="/assets/img/misc/masonry/ss_cyril_methodist_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/st_benedict_bell_tower_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St Benedict Bell Tower" src="/assets/img/misc/masonry/st_benedict_bell_tower_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/st_james_chapel_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. James Chapel 1" src="/assets/img/misc/masonry/st_james_chapel_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/st_james_chapel_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. James Chapel 2" src="/assets/img/misc/masonry/st_james_chapel_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/st_joesph_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Joesph" src="/assets/img/misc/masonry/st_joesph_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 1" src="/assets/img/misc/masonry/st_teresa_of_avilia_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 2" src="/assets/img/misc/masonry/st_teresa_of_avilia_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/st_teresa_of_avilia_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 3" src="/assets/img/misc/masonry/st_teresa_of_avilia_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/st_alphonsus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus" src="/assets/img/misc/masonry/st_alphonsus_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/masonry/st_linus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Linus" src="/assets/img/misc/masonry/st_linus_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/masonry/st_roman_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Roman" src="/assets/img/misc/masonry/st_roman_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/ltp_1.jpg" class="fancybox" rel="gallery"><img alt="Corporate - LTP 1" src="/assets/img/misc/contracting/ltp_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/ltp_2.jpg" class="fancybox" rel="gallery"><img alt="Corporate - LTP 2" src="/assets/img/misc/contracting/ltp_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_rectory_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 1" src="/assets/img/misc/contracting/holy_name_rectory_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_rectory_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 2" src="/assets/img/misc/contracting/holy_name_rectory_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_rectory_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Rectory 3" src="/assets/img/misc/contracting/holy_name_rectory_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/ic_st_joe_school_2.jpg" class="fancybox" rel="gallery"><img alt="Education - IC St. Joe School 2" src="/assets/img/misc/contracting/ic_st_joe_school_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/ic_st_joe_school_3.jpg" class="fancybox" rel="gallery"><img alt="Education - IC St. Joe School 3" src="/assets/img/misc/contracting/ic_st_joe_school_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_giles_1.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 1" src="/assets/img/misc/contracting/st_giles_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_giles_2.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 2" src="/assets/img/misc/contracting/st_giles_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_giles_3.jpg" class="fancybox" rel="gallery"><img alt="Education - St.Giles 3" src="/assets/img/misc/contracting/st_giles_3.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_giles_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - St.Giles 4" src="/assets/img/misc/contracting/st_giles_4.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_giles_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - St.Giles 5" src="/assets/img/misc/contracting/st_giles_5.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/education_1.jpg" class="fancybox" rel="gallery"><img alt="Education - Education 1" src="/assets/img/misc/contracting/education_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/education_2.jpg" class="fancybox" rel="gallery"><img alt="Education - Education 2" src="/assets/img/misc/contracting/education_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_cathedral_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 1" src="/assets/img/misc/contracting/holy_name_cathedral_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_cathedral_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 2" src="/assets/img/misc/contracting/holy_name_cathedral_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_cathedral_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 3" src="/assets/img/misc/contracting/holy_name_cathedral_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_cathedral_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Cathedral 4" src="/assets/img/misc/contracting/holy_name_cathedral_4.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 1" src="/assets/img/misc/contracting/holy_name_courtyard_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 2" src="/assets/img/misc/contracting/holy_name_courtyard_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 3" src="/assets/img/misc/contracting/holy_name_courtyard_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 4" src="/assets/img/misc/contracting/holy_name_courtyard_4.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 5" src="/assets/img/misc/contracting/holy_name_courtyard_5.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_6.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 6" src="/assets/img/misc/contracting/holy_name_courtyard_6.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_7.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 7" src="/assets/img/misc/contracting/holy_name_courtyard_7.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/holy_name_courtyard_8.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 8" src="/assets/img/misc/contracting/holy_name_courtyard_8.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/holy_name_courtyard_9.jpg" class="fancybox" rel="gallery"><img alt="Religious - Holy Name Courtyard 9" src="/assets/img/misc/contracting/holy_name_courtyard_9.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_julie_billart_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Julie Billart 1" src="/assets/img/misc/contracting/st_julie_billart_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_julie_billart_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Julie Billart 2" src="/assets/img/misc/contracting/st_julie_billart_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 1" src="/assets/img/misc/contracting/st_teresa_of_avilia_1.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 2" src="/assets/img/misc/contracting/st_teresa_of_avilia_2.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 3" src="/assets/img/misc/contracting/st_teresa_of_avilia_3.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_4.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 4" src="/assets/img/misc/contracting/st_teresa_of_avilia_4.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_teresa_of_avilia_5.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Teresa of Avilia 5" src="/assets/img/misc/contracting/st_teresa_of_avilia_5.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_alphonsus_1.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 1" src="/assets/img/misc/contracting/st_alphonsus_1.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_alphonsus_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 2" src="/assets/img/misc/contracting/st_alphonsus_2.jpg"></a></li> 
    <li class="active even"><a href="/assets/img/misc/contracting/st_alphonsus_3.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Alphonsus 3" src="/assets/img/misc/contracting/st_alphonsus_3.jpg"></a></li> 
    <li class="active odd"><a href="/assets/img/misc/contracting/st_linus_parish_center_2.jpg" class="fancybox" rel="gallery"><img alt="Religious - St. Linus Parish Center 2" src="/assets/img/misc/contracting/st_linus_parish_center_2.jpg"></a></li> 
</ul> 

      </div> 
     </div> 
    </div> 

Answer 1

您需要將li元素緩存到變量中，並基於它進行濾波。見下面例子：

// cache the whole list item into variable 
var $li = $('.listItem li'); 
// register change event 
$('#filter').on('change', function() { 
    // store search value 
    var 
     value = $(this).val(), 
     filteredElem; 

    // at first, we remove all the list items 
    // completely from page 
    $('.listItem').empty(); 

    // filter out chached element 
    filteredElem = $li.filter(function() { 

    var 
     alt = $(this).find('img').attr('alt'), 
     split = alt.split(' '), 
     lower = split[0].toLowerCase(); 

    if (lower == value) { 
     $(this).addClass('active'); 
     // take only matched element 
     return $(this); 
    } 

    }); 

// append back filtered element into UL 
$('.listItem').append(filteredElem); 

}); 

注意到我添加.listItem類上<ul class="cf listItem">在演示頁線20該元件中，以更容易選擇輸出元件。

DEMO

Answer 2

如果它是一個select下拉列表中，並且想從下拉菜單中刪除的項，可以在下面的removeClass代碼添加此完全刪除的選項：

$(this).remove();