Question

我有这样的标记

<div class="language-wrapper">
    <div class="col-md-6">
        <select class="form-control required" id="language-first" name="language-first" aria-required="true">
            <option value="EN">English</option>
            <option value="CS">Czech</option>
            <option value="HU">Hungarian</option>
        </select>                           
    </div>
    <div class="col-md-6">
        <select class="form-control required" id="language-second" name="language-second" aria-required="true">
            <option value="EN">English</option>
            <option value="CS">Czech</option>
            <option value="HU">Hungarian</option>
        </select>                           
    </div>
    <button type="button" class="btn add-new-row">Add New Row</button>
</div>

这里我要复制行（克隆）。所以我为此制作了像这样的jQuery

jQuery('.add-new-row').click(function() {
    jQuery('.language-wrapper').clone().insertAfter('.language-wrapper');

});

现在这是一个克隆和重复行，但多次意味着第一次重复2 rows then 4 rows then 6 and on.. 但我想要一个简单的方法，那就是我将点击Add New Row按钮，它将克隆最后一行并在最后一行之后插入。另外还有一件事。将删除行按钮。这将删除放置删除按钮的行中的行。有人能告诉我怎么做吗？任何帮助和建议都会非常明显。感谢

Answer 1

为什么要克隆整个语言包装div？如果要克隆col-md-6 div，可以使用last（）选择器。这只会克隆这个css类的最后一个元素。

jQuery('.col-md-6:last').clone().insertAfter('.language-wrapper');

Answer 2

如果我在哪里，我会将按钮放在语言div的某处：

<div class="language-wrapper">
    <div class="col-md-6">
        <select class="form-control required" id="language-first" name="language-first" aria-required="true">
            <option value="EN">English</option>
            <option value="CS">Czech</option>
            <option value="HU">Hungarian</option>
        </select>                           
    </div>
    <div class="col-md-6">
        <select class="form-control required" id="language-second" name="language-second" aria-required="true">
            <option value="EN">English</option>
            <option value="CS">Czech</option>
            <option value="HU">Hungarian</option>
        </select>                           
    </div>
</div>

<button type="button" class="btn add-new-row">Add New Row</button>

和脚本

var parent = $('div.language-wrapper')
parent.find("div:last").clone(true).appentTo(parent);

如果你想克隆整个div使这个

var element= $('div.language-wrapper').last();
element.clone(true).insertAfter(parent);

Answer 3

首先误解了你的请求......这是解决方案： http://jsfiddle.net/8b23omfc/1/

$('.add-new-row').click(function() {
    $('.language-wrapper:last').clone(true).insertAfter('.language-wrapper:last');
    $(this).after('<button type="button" class="btn del-row">delete Row</button>');
    $(this).remove();
});

$('.language-wrapper').on('click','.del-row',function() {
 $(this).parent().remove();
});

单击

，克隆最后一个语言包装器。克隆调用中的'true'会将click处理程序委托给克隆按钮。接下来，我们创建一个删除行按钮并将其追加到当前的“行”中最后，我们从当前行中删除了添加行按钮。

因此，您可以使用多个语言包装器，根据需要删除它们，但始终保留至少一个！

jQuery复制该行并删除与所选行相同的行

3 个答案: