Question

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

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

当然，我可以使用变量进行计数，但是没有变量也可以使用。

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

背景资料：

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

field and buttons

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

如何使jQuery更新remove（）上的内部元素计数器？

1 个答案: