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的第一个元素。

Answer 2

由于您的按钮已动态添加，因此您需要使用 event delegation 将点击事件附加到这些新添加的删除按钮：

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

顺便说一下，id是唯一的，您应该使用class代替按钮

Answer 3

试试这个

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

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

});

Answer 4

尝试此解决方案。

HTML代码：

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

JS代码：

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

$('.deleteButton').live('click',function () {
        $(this).parent().remove();
    });

工作示例：http://jsfiddle.net/QFR5f/

Answer 5

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

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

您正在为问题所在的所有删除按钮分配相同的ID。

注意 - 虽然HTML不会对具有相同ID的多个元素元素产生抗议，但我们不应该这样做。：）

在jQuery中使用nearest（）时出错

5 个答案: