javascript - 如何让 jQuery 更新remove() 上的内部元素计数器？

Question

我有一个元素列表，想要添加和删除元素。该列表应始终包含最小 x 和最大 y 元素。元素包含一个文本输入字段和一个用于删除元素 – 的按钮。单击添加按钮 +，添加成功。

问题是，jQuery remove()似乎并没有减少内部元素计数器，或者可能没有真正删除，而只是隐藏元素。

当然，我可以使用变量进行计数，但没有它也应该可以工作。

如何让jQuery真正删除元素并减少remove()的内部元素数量？

<小时/>

背景信息:

我有一个带有输入字段集合parameter_set的表单。它应包含最少 1 测试输入字段和最多 5 字段。

const PARAMETERS_MIN_NUMBER = 1;
const PARAMETERS_MAX_NUMBER = 5;
$(document).ready(function() {
    addParameterButton = $('#add-parameter-button');
    addParameterButton.on('click', addParameter);
    removeParameterButton = $('.remove-parameter-button');
    removeParameterButton.on('click', removeParameter);
});
function addParameter() {
    var currentCount = $('#my-form .parameters fieldset:first > fieldset').length;
    console.log('add start | current:' + currentCount);
    var template = $('#my-form .parameters fieldset:first > span').data('template');
    template = template.replace(/__index__/g, currentCount);
    if (currentCount < PARAMETERS_MAX_NUMBER) {
        $('#my-form .parameters fieldset:first').append(template);
        removeParameterButton = $('.remove-parameter-button');
        removeParameterButton.on('click', removeParameter);
    }
    currentCount = $('#my-form .parameters fieldset:first > fieldset').length;
    console.log('add stop | current:' + currentCount);
    return false;
}
function removeParameter() {
    var currentCount = $('#my-form .parameters fieldset:first > fieldset').length;
    console.log('remove start | current:' + currentCount);
    if (currentCount > PARAMETERS_MIN_NUMBER) {
        $(this).prev().remove();
        $(this).remove();
    }
    currentCount = $('#my-form .parameters fieldset:first > fieldset').length;
    console.log('remove stop | current:' + currentCount);
    return false;
}

<label class="parameters">
    <span>parameter set</span>
    <fieldset>
        <fieldset>
            <label>
                <span>parameter</span>
                <input type="text" value="" class="form-control field-expression" name="my_form[parameter_set][parameters][0][expression]">
            </label>
            <button value="remove an include parameter" class="btn btn-default button-remove remove-parameter-button" name="parameter_set[parameters][0][remove-parameter]" type="button">&ndash;</button>
        </fieldset>
        <span data-template="the complete fieldset like above with a text-input-field & a remove-button ..."></span>
    </fieldset>
</label>

原则上它是有效的，但是 remove() 不会导致内部元素计数器的减少并破坏整个逻辑:

initial fields number = $('#my-form .parameters fieldset:first > fieldset').length = 1
click on <kbd>+</kbd>
=> fields number = $('#my-form .parameters fieldset:first > fieldset').length = 2
click on <kbd>-</kbd>
=> fields number = $('#my-form .parameters fieldset:first > fieldset').length = 2 -- and not 1!

Answer 1

您正在计算字段集，看起来您只是删除了按钮和标签

回顾一下，您的 HTML 模板如下所示

<fieldset>
    <label>
       <span>...</span>
       <input ...>
    </label>
    <button value="remove">&ndash;</button>
</fieldset>

当你点击按钮时

$(this).prev().remove();
$(this).remove();

这会删除按钮和标签，而不是字段集，因此下次您使用

检查长度时

var currentCount = $('#my-form .parameters fieldset:first > fieldset').length;

您仍然拥有相同数量的字段集。
解决方案可能只是一起删除字段集

function removeParameter(e) {
    e.preventDefault();

    var currentCount = $('#my-form .parameters fieldset:first > fieldset').length;

    if (currentCount > PARAMETERS_MIN_NUMBER) {
        $(this).closest('fieldset').remove();
    }

    currentCount = $('#my-form .parameters fieldset:first > fieldset').length;

    console.log('remove stop | current:' + currentCount);
}