使用 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>

我的问题是如何使用 Unchecked 事件处理程序删除行？我知道它是这样的：

$('#'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)，具体取决于 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>');

然后将函数中的remove行替换为this

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

另外，请确保所有ids 都是唯一的，两个元素不能有相同的id。