使用clone动态添加引导字段

Question

我正在尝试创建一个表单，用户可以单击加号按钮添加另一行字段和删除按钮。这就是我到目前为止所做的：

$(".add").click(function() {
    $(".frm > div:first-child").clone(true).insertBefore(".frm > div:last-child");
    return false;
});
        
$(".remove").click(function() {
    $(this).parent().remove();
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="frm">
        <div>
            <div class="form-group col-md-1">
                <br/>
                <h4 style="text-align:right">1.</h4>
            </div>
            <div class="form-group col-md-1">
                <label for="title" class="control-label">Title</label>
                <input type="text" value='' class="form-control" id="title" placeholder="Title"/>
            </div>
            <div class="form-group col-md-1">
                <label for="fname" class="control-label">First&nbsp;Name</label>
                <input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
            </div>
            <div class="form-group col-md-2">
                <label for="sname" class="control-label">Surname</label>
                <input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
            </div>
            <div class="form-group col-md-2">
                <label for="job" class="control-label">Job</label>
                <input type="text" value='' class="form-control" id="job" placeholder="Job"/>
            </div>
            <div class="form-group col-md-2">
                <label for="class" class="control-label">Class</label>
                <input type="text" value='' class="form-control" id="class" placeholder="Class"/>
            </div>
            <div class="form-group col-md-2 col-md-inset-1">
                <label for="emailadd" class="control-label">Email&nbsp;Address</label>
                <input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
            </div>
            <span class="remove">Remove</span>      
        </div>
    
        <div>
            <span class="add">Add fields</span>
        </div>
    </form>

使用上面的代码我可以添加行但由于某种原因我无法删除它们。此外，当我添加它们时，布局会被破坏，而不是出现在彼此之下的行，它们会附加到末尾，然后断开到另一行。什么可能导致删除不起作用？

COUNTER JS

 $(document).on('click', '.add', function() {
    $('.counter').html(function(i, val) { return val*1+1 });
});


    $(document).on('click', '.remove', function() {
    $('.counter').html(function(i, val) { return val*1-1 });
});

Answer 1

如果你想在没有字段的情况下添加字段，那么一个选项就是一个带有完整代码的隐藏字段。

jsfiddle fullscreen demo（code）

$(document).ready(function() {
    $(".add").click(function() {
        $(".cloneDefault").clone(true).insertBefore(".frm > div:last-child");
        $(".frm > .cloneDefault").removeClass("cloneDefault");
        return false;
   

.cloneDefault{
    display: none;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div class="row cloneDefault">
    <div class="form-group col-md-1">
        <br/>
        <h4 style="text-align:right">1.</h4>
    </div>
    <div class="form-group col-md-1">
        <label for="title" class="control-label">Title</label>
        <input type="text" value='' class="form-control" id="title" placeholder="Title"/>
    </div>
    <div class="form-group col-md-1">
        <label for="fname" class="control-label">First&nbsp;Name</label>
        <input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
    </div>
    <div class="form-group col-md-2">
        <label for="sname" class="control-label">Surname</label>
        <input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
    </div>
    <div class="form-group col-md-2">
        <label for="job" class="control-label">Job</label>
        <input type="text" value='' class="form-control" id="job" placeholder="Job"/>
    </div>
    <div class="form-group col-md-2">
        <label for="class" class="control-label">Class</label>
        <input type="text" value='' class="form-control" id="class" placeholder="Class"/>
    </div>
    <div class="form-group col-md-2 col-md-inset-1">
        <label for="emailadd" class="control-label">Email&nbsp;Address</label>
        <input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
    </div>
    <span class="remove">Remove</span>      
</div>



<form class="frm">
    <div class="row">
        <div class="form-group col-md-1">
            <br/>
            <h4 style="text-align:right">1.</h4>
        </div>
        <div class="form-group col-md-1">
            <label for="title" class="control-label">Title</label>
            <input type="text" value='' class="form-control" id="title" placeholder="Title"/>
        </div>
        <div class="form-group col-md-1">
            <label for="fname" class="control-label">First&nbsp;Name</label>
            <input type="text" value='' class="form-control" id="fname" placeholder="First Name"/>
        </div>
        <div class="form-group col-md-2">
            <label for="sname" class="control-label">Surname</label>
            <input type="text" value='' class="form-control" id="sname" placeholder="Surname"/>
        </div>
        <div class="form-group col-md-2">
            <label for="job" class="control-label">Job</label>
            <input type="text" value='' class="form-control" id="job" placeholder="Job"/>
        </div>
        <div class="form-group col-md-2">
            <label for="class" class="control-label">Class</label>
            <input type="text" value='' class="form-control" id="class" placeholder="Class"/>
        </div>
        <div class="form-group col-md-2 col-md-inset-1">
            <label for="emailadd" class="control-label">Email&nbsp;Address</label>
            <input type="email" value='' class="form-control" id="emailadd" placeholder="Email Address"/>
        </div>
        <span class="remove">Remove</span>      
    </div>

    <div>
        <span class="add">Add fields</span>
    </div>
</form>