Как удалить сгенерированное поле?

Question

[Konstantin Malyarov]

Нашел пример генерации поля по нажатию кнопки:

var n=2;

function add_surgeon(){
    document.getElementById('surgeon').innerHTML+='<br><input style="width: 100%" id="surgeon" name="surgeon" type=text >';
    n++;
}

Решил сделать от обратного, удаление поля по нажатию кнопки.

function remove_surgeon(){
    document.getElementById('surgeon').outerHTML-='<br><input style="width: 100%" id="surgeon" name="surgeon" type=text >';
    --n;
}

В итоге в файле такой скрипт:

var n=2;

function add_surgeon(){
    document.getElementById('surgeon').innerHTML+='<br><input style="width: 100%" id="surgeon" name="surgeon" type=text >';
    n++;
}

function remove_surgeon(){
    document.getElementById('surgeon').outerHTML-='<br><input style="width: 100%" id="surgeon" name="surgeon" type=text >';
    --n;
}

При нажатии кнопки "+" поле добавляется, а при нажатии кнопки "-" все поля исчезают появляется надпись NaN.
Как сделать, чтоб по нажатию кнопки удалялось поле?

Answer 1

[Stepan Pyzhov]

DOM элемент должен иметь уникальное значение ID, в Вашем случае, есть некоторый элемент с ID="surgeon". Вставляя в него input укажите новый ID, как пример: surgeon_N где N - это целое число.
Так же если я верно понимаю, то Вы хотите указать несколько полей с name="surgeon". Для того, что бы они корректно (массивом) ушли на сервер, необходимо указать, name="surgeon[]" - квадратные скобки указывают на принадлежность к массиву.
Если хотите оставить такой подход, как описан у Вас, то можно переделать на такое:

var n=2;

function add_surgeon(){
    var id = 'surgeon_' + n;
    document.getElementById('surgeon').innerHTML+='<div id="' + id + '"><input style="width: 100%" name="surgeon[]" type="text" /></div>';
    n++;
}

function remove_surgeon(){
    var id = 'surgeon_' + (n - 1);
    document.getElementById(id).remove();
    --n;
}

Обёртка в div нужна для того, что бы убрать зависимость от
который тоже придётся убирать.
В свою очередь хочу указать, что += является укороченным вариантом для конкатенации строк, и обратного (удаления) не предусмотрено.

Answer 2

[iBird Rose]

по нормальному лучше делать просто задавая элементу display: none;
я не думаю что у вас там ситуация, что эти элементы будут генерироваться по 100+ штук. а значит полюбому лучше делать через display: none;