使用Jquery從具有特定類的列表中刪除項目

Question

我有一個下拉菜單，當某個特定選項被選中時，將從具有特定類的列表中刪除一個項目。但是，我的刪除命令： $（'＃coll-grouped-list li'）。hasClass（'timeGroup'）。remove（）; 似乎不起作用。有任何想法嗎？

HTML

<select id="tGroup" name="tGroup" class="standard_select" style="width:200px;"> 
        <option value="">Please Select</option> 
        <option value="hourGroup">Group by Hour</option> 
        <option value="dayGroup">Group by Day</option> 
        <option value="weekGroup">Group by Week</option> 
        <option value="monthGroup">Group by Month</option> 
        <option value="yearGroup">Group by Year</option> 
       </select> 

<ul id="coll-selected-list" class="droptrue sort-drop"> 
       </ul> 
<ul id="coll-grouped-list" class="droptrue agg-drop"> 
       </ul> 

JS

$('#tGroup').bind('change', function (e) { 
     if($('#tGroup').val() == 'hourGroup') { 
      $('#coll-grouped-list li').hasClass('timeGroup').remove(); 
      $("#coll-grouped-list").append('<li class="timeGroup">Hour</li>'); 
     } 
     if($('#tGroup').val() == 'dayGroup') { 
      $('#coll-grouped-list li').hasClass('timeGroup').remove(); 
      $("#coll-grouped-list").append('<li class="timeGroup">Day</li>'); 
     }   
     }); 

Answer 1

hasClass返回布爾值，因此直觀，它不是可鏈接，從而做你的例子在做什麼是無效的，因爲沒有方法remove()布爾類（true.remove()）

嘗試

$('#coll-grouped-list li.timeGroup').remove(); 

從docs：

的.hasClass（）如果類被分配到一個 元素

Answer 2

它不會因爲工作方法將返回true .hasClass()返回一個布爾值，而不是一個jQuery對象，所以你不能鏈接另一個jQuery函數（.remove()）。

試試這個：

$('#coll-grouped-list li.timeGroup').remove(); 

Answer 3

試試這個：

$('#tGroup').bind('change', function (e) { 
    var $group = $('#coll-grouped-list'); 
    if(this.value == 'hourGroup') { 
     $group.find('li.timeGroup').remove(); 
     $group.append('<li class="timeGroup">Hour</li>'); 
    } 
    if(this.value == 'dayGroup') { 
     $group.find('li.timeGroup').remove(); 
     $group.append('<li class="timeGroup">Day</li>'); 
    }   
    });