Jquery пытается удалить динамически созданные элементы

0

Я использую 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;
    });

});
  • 1
    Во-первых, сделать это без проблем: вы не можете использовать идентификатор более одного раза (вы создаете 2 входа с одинаковым идентификатором). Во-вторых, добавьте обертки для новых полей, чтобы вы могли удалять добавленные поля с помощью этой обертки (в обертке вы можете использовать кнопки ingedient, quelity и remove) - это будет проще для программирования. А также понятнее.
  • 1
    Проверьте это: stackoverflow.com/questions/20328883/… То же самое, чего вы хотите достичь.
Показать ещё 1 комментарий
Теги:

5 ответов

2
Лучший ответ

JSFIDDLE DEMO

Добавьте динамические элементы в один абзац <p> вместо трех разных абзацев. Таким образом, вы можете сохранить обработчик событий, КАК ЕСТЬ.

$('#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;
});
Поделиться
  • 0
    Отлично работает, спасибо
  • 0
    @NickPocock - отлично. рад помочь.
0

Более эффективно создавать базовый тег, а затем отдельно добавлять аргументы, а не передавать длинную строку html.

Вы можете добавить обработчик удаления непосредственно к отдельным якорям и передать ссылки на элементы, которые вы хотите удалить, если все это делается в той же области, в которой вы создаете элементы:

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 элементов).

Поделиться
0

Попробуй это

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

Ваш выбор получает только элемент "удалить", вы также должны выбрать вновь добавленный с помощью.prevAll()

Примечание: идентификатор должен быть уникальным

DEMO

Поделиться
0

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;
});
Поделиться
0

попробуй это

  $('#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/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню