Question

我目前正尝试使用每行旁边的删除按钮从本地存储列表（数组）中删除条目。我做了删除它的功能，以及一般添加按钮/每行的功能。它看起来像这样：

function printData() {
    let output,
        i;
    let element;

    output = "";
    for(i=0; i<commentsData.length; i++) {

        // adding the delete button to each entry:
        element = "<em id='i'>"+commentsData[i].date+"</em> -- " +
            commentsData[i].contents + "<button id='delete' onclick='deleteEntry()'>Delete</button>" + "<br>";

        output += element;

    }

    $("#comments").html(output);
}

这是我的删除功能：

function deleteEntry() {

    alert("Test");
    if (commentsData.length > 0) {
        commentsData.splice(commentsData.indexOf($(this)),1);
    }

    printData();
}

我也试过在我的init函数中调用它：

    function init() {
    loadData();
    printData();

    $("#delete").click(deleteEntry);

};

但是当我点击按钮时，它目前无效。可能是什么原因？我还不确定我的deleteEntry现在是否正常工作，但我的问题是单击按钮不起作用。你不需要修复我的deleteEntry方法 - 我会自己做，我只需要你的帮助让我的按钮工作，我会非常感激！：）

Answer 1

$("#delete").click(deleteEntry);适用于DOM上已存在的元素，但不适用于动态创建的元素。

你需要绑定这些元素，是的，正如其他人提到的，ID应该是唯一的，因此你应该使用类。

$(document).on('click', '.myDelButton', function() {
    deleteEntry();
});

我认为这应该有效，如果没有，请告诉我。

Answer 2

ID应始终是唯一的。在你的for循环中：

 element = "<em id='"+i+"'>"+commentsData[i].date+"</em> -- " +
        commentsData[i].contents + "<button class='deleteBtn'>Delete</button>" + "<br>";

并在你的init函数中：

$("body").on('click', '.deleteBtn', deleteEntry);

Javascript删除条目数组按钮OnClick

2 个答案: