javascript - 从 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()的委托(delegate)事件模型, 通过传递 .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;
});