複数の要素が削除されたときにJqueryを使用してカウントをリセットするにはどうすればよいですか？

Question

私はこの質問を間違って提出すれば、事前にお詫びします。最初の質問私はそれに付随する大量のコードを持っていました。

要素のグループが削除されたときに、カウント変数をリセットしてその数値をそれぞれのフィールドに再割り当てするにはどうすればよいですか？ 1つのフィールドだけが関与しているが、複数のフィールドが一緒になっているときにこの同じことを達成する方法がわからない場合は、それを行う方法の下で、フィドルを通して理解する。

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



}); 

のオフに行く私は私が求めていますかを示すためにそれを再加工しています。私はこれが1つのフィールドでどのように機能するのか理解していますが、私の場合は、相互に作成して全体として削除する必要がある入力グループがあります。私は、最初の例に示したのと同じ機能を維持する正しい方法を見つけることができないようです。どんな支援も大歓迎です。

リワークされたバージョン。一つの方法が、これを行う方法の

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>