If you are looking to add and remove duplicate input fields, here’s another jQuery example below to do the task for you. This jQuery snippet adds duplicate input fields dynamically and stops when it reaches maximum.
If you read comment lines carefully, the process is pretty straight forward. We start with 1 input field and let user add more fields until the count reaches maximum. Same process goes to delete button, when clicked, it removes current text field by removing the parent element, which is div element.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID var x = InputsWrapper.length; //initlal text box count var FieldCount=1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass">×</a></div>'); x++; //text box increment } return false; }); $("body").on("click",".removeclass", function(e){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox } return false; }) }); |
Demo
We start with single Input field and a “Add more Field” button to allow user to add more fields. The text input field is wrapped in div element, as explained above, on delete button click, it finds parent element, which is div and removes it.
Add More Field
Could you show some HTML?
Edward, from sourcecode.
2
<a href="#" rel="nofollow">×</a>
Edward, from sourcecode.
2
3
4
<div id="InputsWrapper">
<div><input type="text" name="mytext[]" id="field_1" value="Text 1"/><a href="#" class="removeclass">×</a></div>
</div>