用于添加/删除字段的Bootstrap表单按钮不起作用

Question

我正在使用Bootstrap 4和formvalidation.io库来构建和验证表单。问题是，我的添加/删除按钮不起作用。应该通过按下添加按钮并单击删除按钮来删除相应行（出现后）来添加一组字段。

这是HTML代码：

    <form method="POST" name="simpleForm" action="saveAddress" id="simpleForm" autocomplete="off" class="form-horizontal">
    <div class="form-row">
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" name="address[]" placeholder="Address" />
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" name="city[]" placeholder="City" />
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <select class="form-control" name="state[]">
                    <option hidden value="">State</option>
                    <option value="NY">New York</option>
                    <option value="TX">Texas</option>
                </select>
            </div>
        </div>
        <div class="col">
            <div class="form-group">
            <div class="form-group">
                <input type="text" class="form-control" name="zip[]" placeholder="Zip" />
            </div>
            </div>
        </div>
        <div class="col">
            <button type="button" class="btn btn-success btn-sm addButton"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add</button>
        </div>
    </div>

    <div class="form-row row-hide" id="fieldTemplate">
        <div class="col col-xs-1"></div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" name="address[]" placeholder="Address" />
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" name="city[]" placeholder="City" />
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <select class="form-control" name="state[]">
                    <option hidden value="">State</option>
                    <option value="NY">New York</option>
                    <option value="TX">Texas</option>
                </select>
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control" name="zip[]" placeholder="Zip" />
            </div>
        </div>
        <div class="col">
            <button type="button" class="btn btn-danger btn-sm removeButton"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> Remove</button>
        </div>
        <div class="row"></div>
    </div>
    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-1">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </div>
</form>

这是Javascript代码段：

document.addEventListener('DOMContentLoaded', function(e) {
const fv = FormValidation.formValidation(
    document.getElementById('simpleForm'),
    {
        fields: {
            'address[]': {
                validators: {
                    notEmpty: {
                        message: 'Address is required.'
                    }
                }
            },
            'city[]': {
                validators: {
                    notEmpty: {
                        message: 'City is required.'
                    }
                }
            },
            'state[]': {
                validators: {
                    notEmpty: {
                        message: 'State is required.'
                    }
                }
            },
            'zip[]': {
                validators: {
                    notEmpty: {
                        message: 'Zip is required.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap: new FormValidation.plugins.Bootstrap(),
            submitButton: new FormValidation.plugins.SubmitButton(),
            defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            icon: new FormValidation.plugins.Icon({
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh'
            }),
        },

    });

    fv.on('click', '.addButton', function() {
        var $template = $('#fieldTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .insertBefore($template);

        $('#simpleForm')
            .formValidation('addField', $clone.find('[name="address[]"]'))
            .formValidation('addField', $clone.find('[name="city[]"]'))
            .formValidation('addField', $clone.find('[name="state[]"]'))
            .formValidation('addField', $clone.find('[name="zip[]"]'));
    })

    fv.on('click', '.removeButton', function() {
        var $row  = $(this).closest('.form-group');

        $('#simpleForm')
            .formValidation('removeField', $row.find('[name="address[]"]'))
            .formValidation('removeField', $row.find('[name="city[]"]'))
            .formValidation('removeField', $row.find('[name="state[]"]'))
            .formValidation('removeField', $row.find('[name="zip[]"]'));

        $row.remove();
    });
});

我该如何修复这些按钮？