使用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>'); 
    }   
    });