使用iCheck回調和jquery從列表中刪除項目

Question

我有一個動態列表，當用戶點擊某些複選框時，我正在創建一個動態列表。我正在使用iCheck，它內置了某些事件處理程序。我想要的是，當用戶取消選中特定複選框時，可以刪除此列表的「行」之一。

這是我到目前爲止有：

<script> 
     $(document).ready(function(){ 
      var callbacks_list = $('.callbacks ul'); 
      $('.facebook-friends-larger input').on('ifChecked', function(event){ 
       callbacks_list.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>'); 
      }); 

      $('.facebook-friends-larger input').on('ifUnchecked', function(event) { 


      }); 

      }); 
</script> 

HTML：

<ul class="facebook-friends-larger"> 

      <?php $offset_two=0; ?>  
      @foreach ($friends as $friend) 
      <li> 
      <div class="facebook_friend_large"> 
       <input tabindex="1" type="checkbox" name="friend[]" id="{{$friend}}" value="{{$friend}}"> 
       <label for="{{$friend}}" style="display:inline-block;"> 
        <span class="icon"><a href="http://www.facebook.com/{{ $friend }}"><img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="50" width="50"></a></span> 
        <span class="icon_text_large"><a href="http://www.facebook.com/{{ $friend }}"><?php echo $friend_names[$offset_two]; ?></a></span> 
       </label> 
      </div> 
      </li> 
      <?php $offset_two++; ?>     
      @endforeach 

    </ul> 


<div class="callbacks"> 
<ul></ul> 
</div> 

我的問題是我怎麼與未檢查的事件處理程序刪除行？我知道這是沿線的東西：

$('#'this.id).remove(); 

id是唯一的。

但是這會引發錯誤。我怎麼做到這一點？謝謝。

Answer 1

您正在使用下面的代碼此事件處理程序中添加一個新的li

.prepend('<li><span>#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>'); 

$('.facebook-friends-larger input').on('ifChecked', function(event){ //... }); 

所以，從邏輯上講，你可以用下面的代碼刪除li（IMO），根據on prepend

$('.facebook-friends-larger input').on('ifUnchecked', function(event) { 
    event.preventDefault(); 
    $('span#'+ this.id).closest('li').remove(); 
}); 

更新：更改prepend到

.prepend('<li><span id="#'+this.id+'">#' + this.id + '</span> is ' + event.type.replace('if', '').toLowerCase() + '</li>'); 

然後用這個

$('.callbacks ul').find('span#'+ this.id).closest('li').remove(); 

更換remove線的功能同時，確保所有id s爲唯一的，兩個元素不能有相同的id。