修复添加/删除输入字段

安德鲁·尼克

我有下面的代码来动态添加或删除输入字段。

    $(document).ready(function() {
        $(".add-more").click(function(){
            var html = $(".copy").html();
            $(".after-add-more").after(html);
        });

        $("body").on("click",".remove",function(){
            $(this).parents(".col-md-6").remove();
        });

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row after-add-more">

    <div class="col-md-6">
        <div class="form-group">
            <div class="input-group">
                <input type="text" class="form-control required" name="Categories[]" placeholder="Add Text">
                <span class="input-group-btn"><button class="btn btn-success add-more" type="button">ADD</button></span>
            </div>
        </div>
    </div>

</div>

<div class="copy hide">
    <div class="row">

        <div class="col-md-6">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control required" name="Categories[]" placeholder="Add Text">
                    <span class="input-group-btn"><button class="btn btn-danger remove" type="button">REMOVE</button></span>
                </div>
            </div>
        </div>

    </div>
</div>

现在的问题是,当您单击“添加”按钮时,下一个输入将被创建到上一个字段。

在此处输入图片说明

我该如何修正我的代码。我需要对输入字段进行排序。

Faseeh Haris

请在代码中使用append而不是after。

$(document).ready(function() {
        $(".add-more").click(function(){
            var html = $(".copy").html();
            $(".after-add-more").append(html);
        });

        $("body").on("click",".remove",function(){
            $(this).parents(".col-md-6").remove();
        });

    });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章