JQuery程序不能达到我的预期

Question

我不明白为什么当我点击删除项目时，它没有删除我点击的元素，但它从最后添加到第一个元素中删除。

$(document).ready(function () {
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append("<div class='item'>" + toAdd + "</div>");
    });
    $(document).on('click', '.item', function () {
        $(this).remove();
    });
});