jQuery复制该行，并将其与所选行一起删除

我有这样的标记

<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('.add-new-row').click(function() {
    jQuery('.language-wrapper').clone().insertAfter('.language-wrapper');

});

现在，这是一次克隆和复制行，但多次意味着它第一次复制

2行，然后4行，然后6行，等等..

---

但是我想要一个简单的方法，那就是我将点击AddNewRow按钮，它将克隆最后一行并在最后一行之后插入。还有一件事。将出现“删除行”按钮。这将删除放置“删除”按钮的行。有人能告诉我怎么做吗？任何帮助和建议都是非常值得的。谢谢

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

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

---

如果我在您所在的位置，我会将按钮放置在language 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>

如果你想克隆整个div，就做这个

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

---

一开始误解了你的要求。。。以下是解决方案：

$（'.add new row'）。单击（function（）{
$（'.language wrapper:last'）.clone（true）.insertAfter（'.language wrapper:last'）；
$（this）.after（'delete Row'）；
$（this.remove（）；
});
$（'.language wrapper'）。在（'单击'，'.del行'，函数（）上）{
$（this.parent（）.remove（）；
});

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

---

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

当我更改页面样式时，我需要重写脚本。）是的，或者您可以添加一个额外的类，如.row editable，您可以在应用程序中重用它，而不是引用.col-md-6I。我想克隆整个语言包装div。。。那么怎么做呢？你可以试着找到

语言包装器

，然后找到他最后的

div

子项（而不是@mathf adviced）并克隆它。

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

$('.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();
});