选中最后一行，并且不删除它也隐藏按钮

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>
    <button type="button" class="btn delete-row">Delete New Row</button>
</div>

在这里，我想复制行(克隆)。为此，我制作了这样的jQuery

var row = jQuery('.language-wrapper');
jQuery('.add-new-row').click(function() {
    var parent = jQuery('div.language-wrapper').last();
    parent.clone(true).insertAfter(parent); 
    var wrapperLength = jQuery('div.language-wrapper').length;
    if( wrapperLength > 1 ) {
        jQuery('.delete-row').show();
    }
});

在这里，您可以看到我添加了另一个按钮，名为delete new row，当存在的行数超过一行时。这个做得很好。现在我想使用删除行按钮，这样它就可以删除最后一行。当只有一行存在时，按钮将被隐藏。为此，我制作了这样的jQuery

jQuery('.delete-row').click(function() {
    var parent = jQuery('div.language-wrapper').last();
    var Length = jQuery('div.language-wrapper').length;
    jQuery(parent).remove();
    if(Length < 2) {
        jQuery('.delete-language').hide();
    }
    console.log(Length);
})

但是，即使只有一行也不会删除delete row按钮。它还通过执行单击来删除最后一行。那么如何使jquery不会删除最后一行，并且如果只有一行存在，按钮将被隐藏。

Answer 1

你的按钮可以通过它的class="btn delete-row"来定义，所以可以使用.btn.delete-row来选择。

在删除行之前将检查Length，因此当有两行(即将成为一行)时，需要隐藏该按钮。

if(Length === 2) {
    jQuery('.btn.delete-row').hide();
}