jquery - 使用 Jquery 从具有特定类的列表中删除项目

Question

I have a dropdown, which when a particular option is selected removes an item from a list which has a certain class. 但是，我的删除命令： $('#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(); 

从文档：

如果将类分配给一个元素，.hasClass() 方法将返回 true

Answer 2

它不起作用，因为.hasClass()返回一个布尔值，而不是 jQuery 对象，所以你不能在.remove()之后链接另一个 jQuery 函数 ()。

试试这个：

$('#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>');
     }         
  });