javascript - Jquery 尝试删除动态创建的元素

Question

我正在使用 Jquery 动态地将元素添加到我的表单中，然后在必要时删除它们，当仅添加一个表单时我可以执行此操作，但是我的下一个表单允许用户添加成分并添加数量元素与它，我无法弄清楚如何使用按钮删除这两个元素。我已经创建了一个 JSfiddle 如果有帮助的话那就太好了。

http://jsfiddle.net/w5PKZ/

$(document).ready(function() {
    var addDiv2 = $('#addIngredient');
    var i = $('#addIngredient p').size() + 1;

    $('#addNewIngredient').on('click', function () {
        $('<p> <input id="step_' + i + '" size="40" name="ingredient[]' + '" type=text" value="" placeholder="Ingredient" /> </p>').appendTo(addDiv2);
        $('<p> <input id="step_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /><a href="#" class="remNew2">Remove</a> </p>').appendTo(addDiv2);
        i++;
        return false;
    });

    $(document).on('click','.remNew2', function () {
        if (i > 3) {
            $(this).parents('p').remove();
            i - 2;
        }
        return false;
    });

});

Answer 1

JSFIDDLE DEMO

在单个段落中添加动态元素 <p>而不是 3 个不同的段落。这样您就可以保持事件处理程序不变。

$('#addNewIngredient').on('click', function () {
    $('<p> <input id="step_' + i + '" size="40" name="ingredient[]' + '" type=text" value="" placeholder="Ingredient" /><input id="step_' + i + '" size="40" name="quantity[]' + '" type=text" value="" placeholder="Quantity" /><a href=#" class="remNew2"> Remove </a> </p> ').appendTo(addDiv2);
    i++;
    return false;
});