How to add or remove input fields dynamically Using Jquery

How to add or remove input fields dynamically Using Jquery

Dynamic add or remove of input field using jquery is very useful in web projects and commonly now a days. Here in this article, very simple code for dynamic add/remove input field is going to discuss.
This is useful when we need multiple input fields required or multiple file uploading in a webpage. Using jquery multiple input fields or file or image uploading can be added easily nd in a simple way for user. In this article and demo we have performed this event using javascript code and loading jquery library file. Let us take look how to add/remove input fields dynamically.

How to add or remove input fields dynamically Using Jquery - PHPCluster
How to add or remove input fields dynamically Using Jquery – PHPCluster

Here is diving code in three parts which are shown below:
Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#add').on('click', function(){
var newfield = '<div><input type="text" name="field[]" ><button class="remove">-</button> </div>' ;
$('#container').append(newfield);
});

$(document).on('click','.remove' , function(){

$(this).parent('div').remove();

});
});
</script>

HTML

<div id="container">
<div>
<input type="text" name="field[]" >
<button id="add">Add more</button>
</div>
</div>

CSS

<style>
#container{margin-left:450px;margin-top:250px;}
</style>

Demo