adding input fields dynamically Jquery

Question

I'm building this form were the user can add input field dynamically by clicking the + sign.

Then the user can remove the previously added input by clicking the - sign.

My problem is when the user removes one field, all fields are removed. I believe it depends on the position of the .field_wrapper.

I've moved the .field_wrapper to various positions but nothing seems to work. Either way the previously added input is not removed or all inputs are removed.

Can someone advise me on what I'm missing.

here is a link to a fiddle

$(document).ready(function() {
 var max_fields = 10;
 var add_input_button = $('.add_input_button');
 var field_wrapper = $('.field_wrapper');
 var new_field_html = '<input name="title[]" class="form-control form-item type="text" value="" data-label="title" /><a href="javascript:void(0);" class="remove_input_button" title="remove field">-</a>';
 var input_count = 1;
 //add inputs
 $(add_input_button).click(function() {
 if (input_count < max_fields) {
 input_count++;
 $(field_wrapper).append(new_field_html);
 }
 });
 //remove_input
 $(field_wrapper).on('click', '.remove_input_button', function(e) {
 e.preventDefault();
 $(this).parent('div').remove();
 input_count--;
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal">
 <div class="row field_wrapper">
 <label class="col-md-offset-1 col-sm-3 control-label" for="title">Title</label>
 <div class="col-md-6 col-sm-9 col-10">
 <input id="title" class="form-control form-item required" name="input_title[]" type="text" value="" data-label="title" />
 <a href="javascript:void(0);" class="add_input_button" title="Add field">+</a>
 </div>
 </div>
</form>

• Carsten Løvbo Andersen: is this better ? jsfiddle.net/Lwyk9j54

Answer 1

The reason is because the parent('div') from the remove button is the div which holds all the content. The simple way to fix this would be to wrap the new input and remove link in its own div.

Also note that add_input_button and field_wrapper already contain jQuery objects, so you don't need to wrap them again. Try this:

$(document).ready(function() {
 var max_fields = 10;
 var $add_input_button = $('.add_input_button');
 var $field_wrapper = $('.field_wrapper');
 var new_field_html = '<div><input name="title[]" class="form-control form-item type="text" value="" data-label="title" /><a href="javascript:void(0);" class="remove_input_button" title="remove field">-</a></div>';
 var input_count = 1;
 //add inputs
 $add_input_button.click(function() {
 if (input_count < max_fields) {
 input_count++;
 $field_wrapper.append(new_field_html);
 }
 });
 //remove_input
 $field_wrapper.on('click', '.remove_input_button', function(e) {
 e.preventDefault();
 $(this).parent('div').remove();
 input_count--;
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal">
 <div class="row field_wrapper">
 <label class="col-md-offset-1 col-sm-3 control-label" for="title">Title</label>
 <div class="col-md-6 col-sm-9 col-10">
 <input id="title" class="form-control form-item required" name="input_title[]" type="text" value="" data-label="title" />
 <a href="javascript:void(0);" class="add_input_button" title="Add field">+</a>
 </div>
 </div>
</form>