Question

Suppose there is a group of elements like:

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

And there is a button:

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

I want to implement that when I click the button, the group the elements will be created on the html page dynamically. Also beside the elements there is a remove button:

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

When I click it, the elements will be removed.

The process can be executed multiple times dynamically, and all these elements are contained in a form. After user input the answer, all information will be posted to another page.

I think this function can be implemented by js, but I don’t know how to do it. Please provide some code. Thanks!

Answer 1

The easiest way to do this is to use jQuery and do the add / remove operations on the button click

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();
    })
});

Fiddle: http://jsfiddle.net/XZqPa/