删除字段后重置JavaScript计数器

时间:2015-07-26 17:25:47

标签: javascript jquery

我有一个javascript函数,用计数器添加输入字段。现在,当我删除其中一个字段时,它会被删除但计数器仍在继续!在JS或JQuery中有一种方法可以重置计数器并自动递增计数器吗?

JS代码:

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value'+i+'" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();

                }
                return false;
        });
});

请查看jsfiddle

澄清: 我的领域就像:

no. 1
no. 2
no. 3

我想要的是:删除#2后:

no. 1
no. 3
**To**:
no. 1
no. 2

谢谢

3 个答案:

答案 0 :(得分:1)

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label>
    </p>
</div>

的js

function resetIndexes(){
    var j = 1;   
    $('.p_scnt').each(function(){
        if( j > 1){
            $(this).attr('name', 'p_scnt_' + j);
            $(this).attr('placeholder', 'Input Value'+j);
        }   
        j++;    
    });
}


$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents .p_scnt').size() + 1;

    $('#addScnt').on('click', function() {
        i = $('#p_scents .p_scnt').size() + 1;   
        $('<p><label for="p_scnts"><input type="text" size="20" class="p_scnt" name="p_scnt_' + i +'" value="" placeholder="Input Value'+i+'" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#p_scents').on('click', '.remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    resetIndexes();
            }
            return false;
    });
});

以下是JSFiddle

答案 1 :(得分:0)

您是否尝试过以下操作?

       $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
              i--;
            }
            return false;
    });

答案 2 :(得分:0)

建议,而不是答案。

嗯,你必须要改变生活&#39;为&#39; on&#39;

从jQuery 1.7开始,不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应该使用.delegate()而不是.live()。

$('document.body').on('click', '#addScnt', function() {

on on

{{1}}

jQuery live deprecated