CODEWITHSUNDEEP
javascriptjquery
Minesh
Minesh

Reputation: 217

Remove Field button is not working in Dynamic Add / Remove Field with Autocomplete

I have created a dynamic add / remove field with Autocomplete. The code is working fine except the Remove button. The remove button is not removing the fields.

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var availableAttributes = [
    "account_address",
    "account_address_city",
    "account_address_country",
    "account_address_state",
    "account_telephone"
  ];

  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" class="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

      $(wrapper).find("input[name^='user_login']").autocomplete({
        source: availableAttributes
      });
      //add input box
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">
</div>

<button class="add_field_button">Add More Fields</button>

Upvotes: 0

Views: 61

Answers (2)

Ferus7
Ferus7

Reputation: 727

I created a solution, your problem was to use a double class property on the button, and the remove function was not exact

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    var availableAttributes = [
      "account_address",
      "account_address_city",
      "account_address_country",
      "account_address_state",
      "account_telephone"
    ];    
    
   

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>'); 

            $(wrapper).find("input[name^='user_login']").autocomplete({
                source: availableAttributes
            }); 
            //add input box
        }
    });

    $(wrapper).on("click","#remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('.col-md-2').parent('div').remove(); x--;
    }); 

});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="input_fields_wrap">

</div>

<button class="add_field_button">Add More Fields</button>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

You are just removing immediate parent element instead traverse up to .user-fields element then remove() it so

use

$(this).closest('.user-fields').remove();

And use single class attribute when assigning CSS Class. You can't have same attribute appearing twice if it happens latter one is ignored hence the class remove_field is not getting assigned to your <button> so it event handler doesn't work.

so instead of 

class="btn btn-danger" class="remove_field"

use

class="btn btn-danger remove_field"


$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count
  var availableAttributes = [
    "account_address",
    "account_address_city",
    "account_address_country",
    "account_address_state",
    "account_telephone"
  ];

  add_button.click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var element = $('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

      element.find("input[name^='user_login']").autocomplete({
        source: availableAttributes
      });

      wrapper.append(element);
      //add input box
    }
  });

  wrapper.on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.user-fields').remove();
    x--;
  });
});
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input_fields_wrap">

</div>

<button class="add_field_button">Add More Fields</button>

Upvotes: 1

Related Questions