AJAXMINT

Sample code snippet for Adding and Removing the Elements dynamically using jQuery

<div id="choiceTemplate"><input id="answercount" name="answercount" type="hidden" value="1" />
<div id="current1">Answer Choice 1 :
<input id="answer1" name="answer[]" size="20" type="text" /></div>
</div>
<div id="addremovelink" style="clear: both;"><a id="removechoice" href="javascript:;">Remove</a>
<a id="addchoice" href="javascript:;">Add Choice</a></div>

Javascript

$(document).ready(function() {
$("#addchoice").click(function(){
//getting the current element count
var current = $("#answercount").val();
current = Number(++current);
//Append the html content
$("#choiceTemplate").append("
<div id="current" + current + "">Answer Choice " + current + " :
<input id="answer" + current + "" name="answer[]" size="20" type="text" /></div>
");
//assign the current element count
$("#answercount").val(current);
return false;
});
//remove the elements
$("#removechoice").click(function(){
//getting the current/last element count
var current = $("#answercount").val();
//removing the element
$('#current'+current).remove();
//assign the current element count
current = Number(--current);
$("#answercount").val(current);
});
});

Submitted By : Raja

Demo