删除动态生成的字段

Question

我能够生成动态字段，但是当我尝试删除字段而不是删除删除按钮前面的元素时，它会从最后一个向第一个删除

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

Answer 1

因为x的值将始终只是动态创建的元素的数量。

一个可能的解决方案是找到被点击的“删除”按钮并删除它的父级。 替换$('#box'+x).remove(); 用这个$(this).parents('.row').remove();

一个工作小提琴示例： https://jsfiddle.net/3L986nbj/