CODEWITHSUNDEEP
javascriptjquery
Filipe Ferminiano
Filipe Ferminiano

Reputation: 8791

error on removing divs dynamically

I'm trying to add 3 fields dynamically (2 text fields and 1 remove button) per row. The add button is working fine. The problem is the remove function. When I add 2 fields or more, and I try to remove the first, both added fields/rows are deleted

This is my html code:

<div class="col-lg-12">

    <div class="field_wrapper form-group col-sm-12">
        <div class="form-group col-sm-4">
            <input type="text" name="id[]" value="" class="form-control"/>
        </div>
        <div class="form-group col-sm-4">
            <input type="text" name="name[]" value="" class="form-control"/>
        </div>
        <div class="form-group col-sm-4">
            <a href="javascript:void(0);" class="add_button btn btn-primary" title="Add field">Adicionar Valor</a>
        </div>
    </div>

</div>

This is the javascript:

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper:last'); //Input field wrapper
    var wrapper_delete = $('.field_wrapper');

    //var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Remove field">Remover</a></div>'; //New input field html 
    var fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name[]" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        wrapper = $('.field_wrapper:last'); //Input field wrapper
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            var count = $('.field_wrapper').length;
            fieldHTML = '<div class="field_wrapper form-group col-sm-12"><div class="form-group col-sm-4"><input type="text" name="id_'+ count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><input type="text" name="name_' + count +'" value="" class="form-control"/></div><div class="form-group col-sm-4"><a href="javascript:void(0);" class="remove_button btn btn-danger2" title="Add field"><i class="fa fa-trash-o"></i></a></div></div>'; //New input field html
            $(wrapper).append(fieldHTML); // Add field html

        }
    });

    $(wrapper_delete).on('click', '.remove_button', function(e){ //Once remove button is clicked
        wrapper_delete = $('.field_wrapper');
        e.preventDefault();
        $(this).closest('.field_wrapper').remove();
        x--; //Decrement field counter
    });
});
</script>

How can I fix this?

Upvotes: 1

Views: 69

Answers (1)

Artur Filipiak
Artur Filipiak

Reputation: 9157

You're appending the new field_wrapper element to field_wrapper:last. You should place it after, so instead of .append() you should use .after().

$(wrapper).after(fieldHTML); // Add field html

And delegate click event on document (or closest static ancestor), because .field_wrapper element is also dynamicaly added and you can't attach event to it.

$(document).on('click', '.remove_button', function(e){

JSFiddle

Looking at what you're trying to do. I'd recommend to use .clone([with events]). You don't actually need to change input names (unless the reason is other than avoiding name duplicates), as they are set to arrays.
This way, all your code could be as simple as below:

$('.add_button').click(function(){
  $('.field_wrapper').length >= maxField ||
    wrapper.clone(true).find('a.btn').toggle().end().insertAfter('.field_wrapper:last');
});

$('.remove_button').hide().click(function(){
  $(this).closest('.field_wrapper').remove();
});

var maxField = 10, wrapper = $('.field_wrapper').clone(true);

JSFiddle

Upvotes: 2

Related Questions