删除动态表单元素jQuery

Question

我目前正在使用jQuery向我的网页添加动态表单元素。 在添加每个表单元素之后，我希望用户能够在必要时删除该元素。 我目前正在尝试使用jQuery进行此操作，我正在尝试定位某些类并将其删除，但是目前没有任何反应，并且控制台中没有任何错误。

这是我的删除代码，这是我制作的JS小提琴。

$(document).on('click', '.ingredient .remove', function () {
    $(this).parents('.ingredient .quantities').remove();
    return false;
});

https://jsfiddle.net/zp9faa2h/

Answer 1

.ingredient和.quantities具有不同的父代。 这就是为什么.parents('.ingredient .quantities')返回任何要删除的内容的原因。

最好将它们都包装在父div中，但是您可以像下面这样操作：

$(document).on('click', '.ingredient .remove', function () {
     $(this).closest('.ingredient').parent().next().remove();
     $(this).closest('.ingredient').parent().remove();
     return false;
});

然后，这将找到最接近的.ingredient上级到父级，并删除下一个容器.quantities 。 然后删除.ingredients的父.ingredients 。

小提琴