删除字段按钮在具有自动完成功能的动态添加/删除字段中不起作用

Question

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> 

Answer 1

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> 

Answer 2

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>