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;
});

Answer 2

试试这个

     $(this).parent().prevAll(':lt(2)').remove().end().remove();

您的选择只获取“删除”元素，您还必须使用.prevAll（）

选择新添加的元素

注意： ID必须是唯一的

DEMO

Answer 3

fiddle Demo

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

Answer 4

试试这个

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

更新了小提琴http://jsfiddle.net/w5PKZ/10/

Answer 5

构建基本标记然后单独添加参数而不是传入一个长html字符串会更有效。

您可以将remove事件处理程序直接添加到各个锚点，并传入对要删除的元素的引用，如果您在创建元素的同一范围内完成所有这些操作：

JSFIDDLE

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

    $('#addNewIngredient').on('click', function () {
        var p1 = $( '<p />' )
                        .appendTo(addDiv2),
            p2 = $( '<p />' )
                        .appendTo(addDiv2),
            p3 = $( '<p />' )
                        .appendTo(addDiv2),
            ingredient = $( '<input />' )
                        .attr( 'id', 'ingredient_' + i )
                        .attr( 'size', '40' )
                        .attr( 'name', 'ingredient[]' )
                        .attr( 'type', 'text' )
                        .attr( 'placeholder', 'Ingredient' )
                        .val( $( '#ingredient_1' ).val() )
                        .appendTo( p1 ),
            quantity =  $( '<input />' )
                        .attr( 'id', 'quantity_' + i )
                        .attr( 'size', '40' )
                        .attr( 'name', 'quantity[]' )
                        .attr( 'type', 'text' )
                        .attr( 'placeholder', 'Quantity' )
                        .val( $( '#quantity_1' ).val() )
                        .appendTo( p2 ),
            a = $( '<a />' )
                        .attr( 'href', '#' )
                        .text( 'Remove' )
                        .appendTo( p3 )
                        .on( 'click', function(e) {
                            p1.remove();
                            p2.remove();
                            p3.remove();
                            e.preventDefault();
                            // DO NOT DECREMENT i - you may get duplicate IDs
                        } );
        i++;
        return false;
    });
});

您也可以将所有元素添加到p1而不是创建多个段落（如果您使用div元素而不是p元素，那么语义会更好。）

Jquery试图删除动态制作的元素

5 个答案: