jQuery Dynamically add input fields

Hi, today i am going to tell about how to add and remove the dynamic input fields by using jQuery, this kind of app is sometimes very useful when we add unlimited skill set in that case we can use this script very easily, it is just few lines of code .. enjoy it.

HTML

in html take the input box and one add button

<div class="lessoncup">

<div id="box">
<input name="name" type="text" id="name" class="name" placeholder="Input 1">
<img src="add.png" width="32" height="32" border="0" align="top" class="add" id="add" />
</div>

</div>

JAVASCRIPT

now write the click function to add button as a selector, here i am storing the input box #box div into inp variable to use later and taking the length of input boxes using size() method and adding addition operator to increasing the input box

now i wrote the html code with input text box and remove buttons and i am generating dynamic names to input text box , and i used appendTo() method to append the content and passing inp variable inside the method

to remove the added input fields i just write the click function on remove button and inside this function i just used parent() method to get the parent element and i used remove() method to remove the added input box

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#add').click(function(){
  
  var inp = $('#box');
  
  var i = $('input').size() + 1;
  
  $('<div id="box' + i +'"><input type="text" id="name" class="name" name="name' + i +'" placeholder="Input '+i+'"/><img src="remove.png" width="32" height="32" border="0" align="top" class="add" id="remove" /> </div>').appendTo(inp);
  
  i++;
  
 });
 
 
 
 $('body').on('click','#remove',function(){
  
  $(this).parent('div').remove();

  
 });

  
});

</script>

Live Demo   Download Script