从DOM中删除已添加了Javascript和jQuery的项目？

Question

我正在开发一个JavaScript / jQuery项目，当单击一个按钮时会向页面添加一组div和输入字段，还有一个按钮可以在单击该按钮时从页面中删除这些项目。

我的问题是，在页面加载后，它不会从页面中删除已添加到页面中的项目。因此，使用Javascript添加到页面的任何内容都不会被Javascript删除。

以下是我使用.on jQuery事件的代码，但它没有按照我的解释做。

如何在Dom加载后使用Javascript添加到页面的项目中使用下面的代码？

// Remove "Deleted" Rows from View and mark as a Deleted item
$(".delete").on('click',function() {
    $(this).parents(".dnsRecord").addClass("deleted").find("input.delete").val("true");
    $(this).parents(".dnsRecord").find("span.undo").fadeIn('slow');
    PanelDNS.unsavedChanges = true;
});

Answer 1

使用.on()的委托事件模型，将.delete选择器作为第二个参数传递

$(document).on('click', '.delete', function() {
    $(this).parents(".dnsRecord").addClass("deleted").find("input.delete").val("true");
    $(this).parents(".dnsRecord").find("span.undo").fadeIn('slow');
    PanelDNS.unsavedChanges = true;
});