javascript - 在 jQuery 中使用closest()时出错

Question

我只能按一次删除按钮来删除每个li。为什么会发生这种情况？

<input type="text" placeholder ="Add List" id="listItem"/>
<button id="addButton">add Item</button>
<ul id="output"></ul>


$(document).ready( function(){
    $('#addButton').click(function(){
        var listItem = '<li>' + $('#listItem').val();
        listItem += '<button id = "deleteButton">Delete</button';
        listItem += '</li>';
        $('#output').append(listItem);

        $('#deleteButton').click(function() {
            $(this).closest('li').remove();
        });
    });
});

Answer 1

元素的ID必须是唯一的，因此使用class来对相似的元素进行分组。还可以使用 event delegation

$(document).ready(function () {
    $('#addButton').click(function () {
        var listItem = '<li>' + $('#listItem').val();
        listItem += '<button class="deleteButton">Delete</button';
        listItem += '</li>';
        $('#output').append(listItem);
    });
    $('#output').on('click', '.deleteButton', function () {
        $(this).closest('li').remove();
    });
});

演示:Fiddle

当您使用 id-selector 时，它只会获取具有所述 ID 的第一个元素。