javascript - 使用 .prop() 创建全选复选框，但不希望删除该复选框

Question

因此，我创建了一个全选复选框来选择和取消选择我的列表。 一切都很好，但是当我删除列表时，它也会删除全选复选框。 请告诉我我做错了什么。 这是代码:

HTML:

         <div class="item-list">
                <H2>Shopping List</H2>              
                <ul class="check-list">
                    <li><input type="checkbox" id="select-all"/>Select All</li>
                </ul>
            </div>

jQuery:

$(document).ready(function(){

    $(".add-btn").click(function (){
        var addItem = $('#item-add').val();
        $(".check-list").append('<li ><input type="checkbox" class="check-box">' + addItem + '</li>');
    });

    $('#select-all').change(function(){
        $('.check-box').prop('checked', $(this).prop('checked'));
    });

    $(".rem-btn").click(function(){
        $(".check-list input:checked").parent().remove();
    });

}); 

Answer 1

如果您想在执行删除操作时排除全选复选框。 $.fn.not()可用于从 $(".check-list input:checked") 元素中排除复选框。

Remove elements from the set of matched elements.

使用

$(".check-list input:checked").not('#select-all').parent().remove();

或者，:not selector也可以使用

Selects all elements that do not match the given selector.

$(".check-list input:checked:not(#select-all)").parent().remove();