Как динамически добавлять и удалять вводимые текстовые поля?

Question

Предположим, что есть группа элементов, таких как:

<p>What's your question?</p>
<input type='text' name='question'/>

И есть кнопка:

<input type='button' value='Add' />

Я хочу реализовать, что когда я нажимаю кнопку, группаэлементы будут создаваться на html странице динамически.Также рядом с элементами есть кнопка удаления:

<input type='button' value='Remove' />

Когда я нажимаю на нее, элементы будут удалены.

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

Я думаю, что эта функция может быть реализована с помощью js, но я не знаю, как это сделать.Пожалуйста, предоставьте некоторый код.Спасибо!

Answer 1

Самый простой способ сделать это - использовать jQuery и выполнять операции добавления / удаления по нажатию кнопки

HTML:

<div>
    <button id='addButton'>Add</button>
    <button id='removeButton'>Remove</button>
</div>
<div id='target'></div>

JavaScript:

$(document).ready(function() {
    $('#addButton').click(function () {
        var elem = $('<div></div>');
        elem.append('<p>What\'s your name</p>');
        elem.append('<input type="text">');
        $('#target').append(elem);
    }); 

    $('#removeButton').click(function () {
        $('#target div:last').remove();
    })
});

Скрипка: http://jsfiddle.net/XZqPa/

Answer 2

Этот вопрос задавался несколько раз.Ищите «Javascript show hide element».

Лично я хотел бы использовать библиотеку jQuery, пометить элемент ввода или какой-нибудь div, окружающий разметку, которую вы хотите динамически показать и скрыть, с помощью тега ID и использовать коднапример:

$('#someuniqueid').hide();

$('#someuniqueid').show();

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

Если вам нужно решение vanilla js - посмотрите другие ответы, выполнив их поиск, - есть несколько вариантов на выбор.