Проблема с удалением ввода из формы после добавления

Question

, поэтому я получил свою форму, успешно добавляя новый ввод одним нажатием кнопки.Однако теперь я хочу иметь возможность удалить это последнее добавление по нажатию новой кнопки, а затем добавить кнопку сброса.

Это был код, который у меня был на месте, который, как я понимаю, теперь просто удаляет отправкуСначала нажмите кнопку, что, очевидно, мне не нужно.

Вот мой фрагмент JavaScript: (обратите внимание, я добавил appendTo (), чтобы продемонстрировать div, к которому я успешно добавляю)

$(function() { 
var i = $('input').size('#temp') + 1; 
$('a#add').click(function() { 
    $('<input type="text" value="user' + i + '" />').appendTo('#temp'); 
    i++; 
});
$('a#remove').click(function() { 
if(i > 3) { 
    $('input:last').remove(); 
    i--; 
}
});

большое спасибо

Answer 1

Ваш скрипт удалит последний ввод со страницы, а не последний из div с идентификатором temp. Возможно, вы удаляете другой вход со своей страницы.

Попробуйте это:

$('a#remove').click(function() { 
    if(i > 3) { 
        $('#temp input:last').remove(); 
        i--; 
    }
});

Edit:

Вы закрываете только обработчик события $('a#remove').click(), а не анонимную функцию. Это может быть ошибкой копирования / вставки, но также может быть проблемой в вашем коде.

Редактировать 2:

Чтобы удалить все, кроме оригинала, я бы рекомендовал сохранить ссылку на все добавленные входные данные, поскольку это уменьшает необходимость обхода DOM для каждого удаления. Сделайте что-то вроде этого (этот код не проверен и не проверен):

$(function() { 
    var addedInputs = [];
    $('a#add').click(function() { 
        var newInput = $('<input type="text" value="user' + i + '" ">').appendTo('#temp'); 
        addedInputs.push(newInput);
    });

    $('a#remove').click(function() { 
        var inputToRemove = addedInputs.pop();
        inputToRemove.remove();
    });

    $('a#clear').click(function() { 
        var i,
            inputToRemove;
        for(i = addedInputs.length - 1;i >= 0; i -=1) {
            inputToRemove = addedInputs[i];
            inputToRemove.remove();
        }
        addedInputs = [];
    });
});

Answer 2

Вы пробовали:

$("a#remove").click(function() { 
    if(i > 3) { 
        $("input[type='text']").last().remove(); 
        i--; 
    }
});

Это выберет входы, имеющие type = "text", возьмет последний и удалит его.