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

Question

我用Autocomplete创建了一个动态添加/删除字段。除了"删除"按钮外，代码运行良好。删除按钮不会删除字段。

$(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

您只是删除了直接父元素，而不是遍历到.user-fields元素，然后遍历remove()元素，因此

使用

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

并且在分配CSS类时使用单个类属性。若发生这种情况，就不能让同一个属性出现两次，后者会被忽略，所以类remove_field不会被分配给<button>，所以它的事件处理程序不起作用。

所以不是

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

使用

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

我创建了一个解决方案，您的问题是在按钮上使用双class属性，并且remove函数不完全是

$(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>