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.
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>