Как удалить поле ввода, которое было вставлено с помощью JavaScript

Question

Кто-то, пожалуйста, помогите мне, как добавить новую функцию для удаления поля, у меня есть функция сценария js, которая добавляет новое поле следующим образом

<script language="javascript">
fields = 0;
function addInput() {
    if (fields != 10) {
        var htmlText =  "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
        var newElement = document.createElement('div');
        newElement.id = 'new_field';
        newElement.innerHTML = htmlText;

        var fieldsArea = document.getElementById('new_field');
        fieldsArea.appendChild(newElement);
        fields += 1;

    } else {
        alert("Only 10 fields allowed.");
        document.form.add.disabled=true;
    }
} 
</script>

, но мне нужны некоторые подсказки, чтобы добавить новые функции для удаления поля,Буду признателен за любые предложения и указатели.

Answer 1

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

Метод .removeChild элементов DOM - это то, что вам нужно..removeChild удалит узел (элемент или текст) из дерева DOM (набор элементов, фактически содержащийся в документе), только если переданный узел на самом деле является потомком этого элемента, в противном случае возникает ошибка.

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

function removeLastField() {
    var fieldsArea = document.getElementById('new_field'),
        lastChild = fieldsArea.lastChild;
    if(lastChild) {
        fieldsArea.removeChild(lastChild);
        fields -= 1;
    }
}

Answer 2

Прочтите здесь о функции removeChild () removeChild () - разработчик Mozilla

Правка Или здесь: removeChild () w3schools