javascript - 克隆内联表单字段并附加到父容器

Question

我有以下表单字段:

<div id="filename-url-container">
    <div class="form-inline form-group">
        <input name="filename[]" class="form-control" placeholder="Filename" type="text">
        <div class="input-group">
            <input name="url[]" class="form-control" placeholder="URL" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default btn-add" type="button">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </span>
        </div>
    </div>
</div>

我想在每次按下按钮时抓取第一个子元素，并将其附加到 filename-url-container div 的底部而不原始值克隆字段。

我试图让它工作，但它没有正确附加:

$('#filename-url-container').on('click', '.btn-add', function (e) {
    e.preventDefault();
    var formGroup= $('#filename-url-container :first-child');
    $('#filename-url-container').append(formGroup);
    console.log(controlForm);
});

Answer 1

您应该在附加元素之前.clone元素 - 正如所写，您的代码将简单地获取现有元素并尝试将它们移动到完全相同的位置。

您还需要约束选择器，否则它将选择容器内的每个 :first-child 元素，而不仅仅是直接子元素:

$('#filename-url-container').on('click', '.btn-add', function (e) {
    var formGroup= $('#filename-url-container > :first-child').clone(true);
    formGroup.find('input').val('');   // erase values
    $('#filename-url-container').append(formGroup);
});

演示地址:http://jsfiddle.net/alnitak/dvqgnga0/