如何在删除多个元素时使用Jquery重置计数？

Question

如果我错误地提交了这个问题，请提前致歉。第一个问题我有大量的代码伴随它。

如何在删除一组元素时重置计数变量并将该数字重新分配给相应的字段？我通过下面的 fiddle 了解如果只涉及一个字段如何做到这一点，但不确定当多个字段在一起时如何完成同样的事情。

我学到了很多关于 Jquery 的知识，但仍然发现自己遇到了让我无法回答的障碍。离开这个 JSFiddle

    <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>

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



});

我已对其进行修改以显示我的要求。我了解这如何与一个字段一起使用，但就我而言，我有一组输入需要相互创建并作为一个整体删除。我似乎无法找到正确的方法来保持第一个示例中所示的相同功能。非常感谢任何帮助。

修改后的版本。

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><input type="text" size="20" class="Parent" name="Parent_' + i +'" value="" placeholder="Input Value'+i+'" /><input type="text" size="20" class="Child" name="Child_' + i +'" value="" placeholder="Input Value'+i+'" /><input type="text" size="20" class="Grandchild" name="Grandchild_' + i +'" value="" placeholder="Input Value'+i+'" /><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;
    });



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <input type="text" class="p_scnt" size="20" name="Parent" value="" placeholder="Parent" />
        <input type="text" class="p_scnt" size="20" name="Child" value="" placeholder="Child" />
        <input type="text" class="p_scnt" size="20" name="Grandchild" value="" placeholder="Grandchild" />
    </p>
</div>

Answer 1

有很多方法可以做到这一点，但一种方法是添加容器元素，然后将其用于计数。您也可以将输入数除以 3。

这是第一种方法的示例。输入用 <p class="input-wrap"> 包裹并循环遍历这些输入，在其中查找输入并根据容器的计数更新它们的 name/input。

还会拆分 _ 上的原始输入元素的名称，以便保留您使用的基本名称（如 "Parent_"）。您可以对 placeholder 属性做类似的事情。

function resetIndexes() {
  var j = 1, name, $this;
  
  // for each element on the page with the class .input-wrap
  $('.input-wrap').each(function() {
    if (j > 1) {
      // within each matched .input-wrap element, find each <input> element  
      $(this).find('input').each(function() {
        $this = $(this);
        name = $this.attr("name").split('_')[0];
        $(this).attr('name', name + '_' + j);
        $(this).attr('placeholder', 'Input Value ' + j);
      })
    }
    j++;
  });
}


$(function() {
  var scntDiv = $('#p_scents');
  var i;

  $('#addScnt').on('click', function() {
    // instead of counting inputs, count the wrappers
    i = $('#p_scents .input-wrap').size() + 1;
    $('<p class="input-wrap"><input type="text" size="20" class="Parent" name="Parent_' + i + '" value="" placeholder="Input Value ' + i + '" /> <input type="text" size="20" class="Child" name="Child_' + i + '" value="" placeholder="Input Value ' + i + '" /> <input type="text" size="20" class="Grandchild" name="Grandchild_' + i + '" value="" placeholder="Input Value ' + i + '" /> <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;
  });



});

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p class="input-wrap">
    <input type="text" class="p_scnt" size="20" name="Parent" value="" placeholder="Parent" />
    <input type="text" class="p_scnt" size="20" name="Child" value="" placeholder="Child" />
    <input type="text" class="p_scnt" size="20" name="Grandchild" value="" placeholder="Grandchild" />
  </p>
</div>

如何在删除多个元素时使用Jquery重置计数？

How to use Jquery to reset count when multiple elements are deleted?

html

jquery

counter

dynamic-forms