AJAXMINT

Endless Ajax Resources

Dynamically Add Remove Elements using jQuery

Dynamically Add Remove Elements using jQuery

November 27th, 2009 6 Comments

Sample code snippet for Adding and Removing the Elements dynamically using jQuery
{code type=html}

Answer Choice 1 :

Remove
Add Choice

{/code}

Javascript

{code type=html}
$(document).ready(function() {

$(“#addchoice”).click(function(){
//getting the current element count
var current = $(“#answercount”).val();
current = Number(++current);

//Append the html content
$(“#choiceTemplate”).append(”

Answer Choice ” + current + ” :

“);

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

});

{/code}

Submitted By : Raja

Demo 

Posted in ajax | Tags: add remove, dynamic elements, elements, jquery

« Mootools – A Powerful Product Highlighter

A mootools based custom select box | mavselectbox »

You can leave a response, or trackback from your own site.

6 Responses to “Dynamically Add Remove Elements using jQuery”

1. Harry says:

   January 27, 2010 at 12:52 am

   Hi Raja,

   Thanks for the post, What plugins we require to run the above mentioned code?

   Thanks
   Harry
2. admin says:

   January 27, 2010 at 1:21 am

   Hi Harry,

   No plugin needed..this is simple jquery code.

   any issue with the above code? i am happy to help you.

   Thanks,
   Raja.
3. anish says:

   February 4, 2010 at 9:51 pm

   one error on .append() function
4. admin says:

   February 4, 2010 at 11:03 pm

   Please check the demo and see view source of demo http://ajaxmint.com/demo/add-remove-elements.html

   the below line
   $("#choiceTemplate").append("

   Answer Choice " + current + " :
   

   ");

   should be

   $("#choiceTemplate").append("

   Answer Choice " + current + " :


   ");
5. vishal says:

   July 15, 2010 at 6:37 am

   its really demanding.
   thanks for this code
6. anand says:

   July 22, 2010 at 1:39 am

   Hi,
   i would like to place the remove button near each input field, so that the user can remove a specific text field…
   can u plz help me ?