Question

<form class="cityForm form-horizontal form-label-right" action="" method="POST" novalidate>
    <div class="form-group">
        <div class="city col-md-4 col-sm-4 col-xs-12">
            <div class="item form-group">
                <label class="control-label" for="city">City<span class="required">*</span> </label>
                <div class="">
                    <select class="form-control" id="city" name="pick_up_city">
                        <option>Select City</option>
                        <option>Mumbai</option>
                        <option>Delhi</option>
                        <option>Jaipur</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="address col-md-8 col-sm-8 col-xs-12">
            <div class="item form-group">
                <label class="control-label" for="address">Address<span class="required">*</span> </label>
                <div class="">
                    <input type="text" class="form-control" id="address" name="pick_up_address"> </div>
            </div>
        </div>
        <div class="multiCheck">
            <input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
            <br> </div>
    </div>
    <div class="form-group hide" id="cityFormExtend">
        <div class="city col-md-4 col-sm-4 col-xs-12">
            <div class="item form-group">
                <label class="control-label" for="city">City<span class="required">*</span> </label>
                <div class="">
                    <select class="form-control" id="city" name="pick_up_city">
                        <option>Select City</option>
                        <option>Mumbai</option>
                        <option>Delhi</option>
                        <option>Jaipur</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="address col-md-8 col-sm-8 col-xs-12">
            <div class="item form-group">
                <label class="control-label" for="address">Address<span class="required">*</span> </label>
                <div class="">
                    <input type="text" class="form-control" id="address" name="pick_up_address"> </div>
            </div>
        </div>
        <div class="multiBtn">
            <button type="button" class="addBtn">Add another pickup location</button>
            <button type="button" class="removeBtn">Remove this pickup location</button>
        </div>
    </div>
</form>

以上是我的html表单，它有两个表单组类。第一个始终显示为浏览器打开，第二个仅在选中复选框时显示。它在这里工作正常。

现在，我希望removeBtn删除创建的新表单，并addBtn添加其他表单。

以下是我的JavaScript代码：

$(document).ready(function() {
    $('#multiCheck').change(function() {
        if (this.checked) {
            var $pick = $('#cityFormExtend');
            $clone = $pick.clone().removeClass('hide').removeAttr('id').insertBefore($pick);
        }
        if (!this.checked) {
            $clone.remove();
        }
    }).on('click', '.addBtn', function() {
        var $pick = $(this).parents('.form-group');
        $clone = $pick.clone().insertBefore($pick);
    }).on('click', '.removeBtn', function() {
        var $pick = $(this).parents('.form-group');
        $pick.remove();
    })
});

Answer 1

使用

 <script>
 $(document).on('click', '.addBtn', function(){
        var $pick = $(this).parents('.form-group');
        $clone = $pick.clone().insertBefore($pick);
    });

    $(document).on('click', '.removeBtn', function() {
        var $pick = $(this).parents('.form-group');
        $pick.remove();
    });
</script>

按钮单击没有响应

1 个答案: