JavaScript删除输入阵列按钮ONCLICK

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现在是否正在工作，但是我的问题是单击按钮不起作用。您不需要修复我的删除方法 - 我会自己做，我只需要您的帮助即可让我的按钮上班，我会非常好！：(

Answer 1

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

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

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

我认为这应该可以起作用，让我知道。

Answer 2

ID应该始终是唯一的。在您的循环中：

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

和您的初始功能：

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