[英]Delete dynamically generated fields
I am able to generate the dynamic fields but when i am trying to delete the fields rather then deleting the elements in front of the delete button it is deleting from last towards first我能够生成动态字段,但是当我尝试删除字段而不是删除删除按钮前面的元素时,它会从最后一个向第一个删除
<script>
$(document).ready(function(){
var max_fields = 10;
var wrapper = $(".more");
var add_button = $(".add");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if (x < max_fields){
x++;
$(wrapper).append('<div id="box'+x+'" class="row"><div class="col-sm-3 mb-3"><select name="feeType[]" class="form-control shadow-sm" required><option value="" selected disabled>Select Fee</option><option value="Admission">Admission Fee</option><option value="Development">Development Fee</option><option value="Annual">Annual Fee</option><option value="Tuition">Tuition Fee</option></select></div><div class="col-sm-3 mb-3"><input type="number" name="amount[]" class="form-control shadow-sm" placeholder="Amount" required></div><div class="col-sm-3 mb-3"><button class="delete btn btn-danger shadow-sm">Delete Fields</button></div></div>'); //add input box
}else{
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e){
e.preventDefault();
$('#box'+x).remove();
x--;
})
});
</script>
Because x
's value will always be just the number of element that were dynamically created.因为x
的值将始终只是动态创建的元素的数量。
A possible solution would be to find the 'remove' button that was clicked and remove it's parent.一个可能的解决方案是找到被点击的“删除”按钮并删除它的父级。 replace $('#box'+x).remove();
替换$('#box'+x).remove();
with this $(this).parents('.row').remove();
用这个$(this).parents('.row').remove();
A working fiddle example: https://jsfiddle.net/3L986nbj/一个工作小提琴示例: https://jsfiddle.net/3L986nbj/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.