Comment réindexer la boîte de sélection avec les champs cachés

Question

J'ai du mal à trouver comment réindexer (?) Une série de champs cachés avec jQuery/Javascript. L'exemple de code ci-dessous est généré chaque fois qu'un utilisateur clique sur un bouton de création. La valeur numérique appliquée aux champs cachés dans le niveau [] est l'indice d'une option sélectionnée dans une liste déroulante. Le problème que j'ai est que chaque bloc de code (sauf le premier, c'est-à-dire le premier niveau 1) devrait avoir l'option d'être enlevé. Lorsque le lien de suppression est cliqué, j'ai implémenté jQuery qui supprime la div avec l'ID sélectionné. Le problème principal est que je dois modifier le nom de chaque bloc lors de la suppression et réindexer le menu déroulant afin que les chiffres soient incrémentaux. Les champs cachés devront également suivre l'index de la liste déroulante.

J'ai du mal à déterminer comment y parvenir avec Javascript ou jQuery.

J'ai essayé d'inclure un exemple avant toute suppression. Il y a 4 blocs, chacun est créé de manière incrémentielle en fonction de l'option de la liste déroulante. Un utilisateur pourrait tenter de supprimer le bloc 3. Actuellement, cela supprimera l'option de la sélection en utilisant le jQuery ci-dessus, mais par conséquent l'affichage affichera des numéros de blocs incohérents, les champs cachés auront les index incorrects et la liste déroulante sera "désynchronisé".

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a.removeTier").live('click', function() { 
      var tierId = $(this).parent().parent().attr('id').match(/\d+$/); 
      $('#tiers option:eq('+tierId+')').remove(); 
      $('#tier'+tierId).remove();    
      return false;    
     }); 
    }); 
</script> 

<p align="left"> 
    <label style="width: 45px;" for="newTier"><b>Tier:</b> *</label> 
    <button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier">New Tier</button> 
    <select name="tiers" id="tiers"> 
     <option value="0">Select</option>        
     <option selected="" value="1">Tier 1</option> 
     <option value="2">Tier 2</option> 
     <option value="3">Tier 3</option> 
     <option value="4">Tier 4</option> 
    </select> 
</p> 

<div id="tierRight">  

    //1 
    <div id="tier1"> 
     <div style="text-align: left;"> 
      Tier 1<br><label for="publication_date_1">Publication Date: </label> 
      <input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker">   <input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1"> 
     </div> 
     <span> 
      <a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#">Autism Initiatives</a> 
      <input type="hidden" value="132" name="tier[1][panels][132][panelId]"> 
      <input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]"> 
     </span> 
    </div><br> 

    //2 
    <div id="tier2"> 
     <div style="text-align: left;"> 
      Tier 2 - [<a id="tier2" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[2][publication_date]">Publication Date: </label> 
      <input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker"> 
      <input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08"> 
     </div> 
     <span> 
      <a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#">Autism 2</a> 
      <input type="hidden" value="149" name="tier[2][panels][149][panelId]"> 
      <input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]"> 
     </span> 
    </div><br> 

    //3 
    <div id="tier3"> 
     <div style="text-align: left;"> 
      Tier 3 - [<a id="tier3" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[3][publication_date]">Publication Date: </label> 
      <input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker"> 
      <input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15"> 
     </div> 
     <span> 
      <a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#">Autism 3</a> 
      <input type="hidden" value="150" name="tier[3][panels][150][panelId]"> 
      <input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]"> 
     </span> 
    </div><br> 

    //4 
    <div id="tier4"> 
     <div style="text-align: left;"> 
      Tier 4 - [<a id="tier4" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[4][publication_date]">Publication Date: </label> 
      <input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker"> 
      <input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22"> 
     </div> 
     <span> 
      <a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#">Autism 4</a> 
      <input type="hidden" value="151" name="tier[4][panels][151][panelId]"> 
      <input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]"> 
     </span> 
    </div><br> 
</div> 

Answer 1

D'abord, vous aurez besoin de nettoyer votre HTML - vous utilisez id = « Tier1 » à la fois un div et un a qui finira par causer des problèmes.

est ici une variante simple qui montre une approche possible:

<div class="tier"> 
    <p class="title">Tier 1</p> 
</div> 
<div class="tier"> 
    <p class="title">Tier 2</p> 
    <p class="delete">Delete Me</p> 
</div> 
<div class="tier"> 
    <p class="title">Tier 3</p> 
    <p class="delete">Delete Me</p> 
</div> 

Javascript:

$(function() { 
    $(".delete").bind("click", function() { 
     $(this).parent().remove(); 
     $(".tier").each(function(index) { 
      var tierIndex = index+1; 
      $(this).find(".title").text("Tier " + tierIndex); 
     }); 
    }); 
}); 

Ou comme jsFiddle here.