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

在这里你可以看到我正在添加另一个名为删除新行的按钮，当存在多行时。这个很好。现在我想使用删除行按钮，以便删除最后一行。当只有一行存在时，按钮将隐藏。所以我为此制作了像这样的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);
})

但即使存在单行，这个也不会删除删除行按钮。它也通过点击删除最后一行。因此，如果存在单行，如何制作jquery以便它不会删除最后一行并且按钮将被隐藏。

Answer 1

您的按钮可以由class="btn delete-row"定义，因此可以使用.btn.delete-row进行选择。

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

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

检查最后一行而不删除它也隐藏按钮

1 个答案: