如何刪除多個元素時使用Jquery重置計數？

Question

如果我錯誤地提交了這個問題，請提前道歉。第一個問題，我有大量的代碼陪伴它。

如何刪除一組元素時重置計數變量並將該編號重新分配給各個字段？我明白通過下面的小提琴如何做到這一點，如果只涉及一個領域，但不知道如何在多個領域在一起時完成同樣的事情。

我一直在學習很多關於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">中，它循環輸入這些輸入，根據容器的計數找到輸入並更新其名稱/輸入。

還拆分，讓您使用的基本名稱（如「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>