使用jquery更改控件的id的更好方法

Question

我有以下從django model_formset呈現的窗體。它開始於一個形式和一些靜態控件（如日期等）。該形式的字段集是「形式的包裝器」 DIV

<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data"> 
    <input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000"> 
    <input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI"> 
    <div class="form-group"> 
     <label for="date">Date</label> 
     <input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly=""> 
    </div> 
    <div class="form-group"> 
     <label for="id_title">Title</label> 
     <select class="form-control input-sm" id="id_title" name="title"> 
      <option value="" selected="selected">---------</option> 
      <option value="Observation">Observation</option> 
      <option value="Initial">Initial</option> 
      <option value="Progress">Progress</option> 
      <option value="Final">Final</option> 
      <option value="Post Treatment">Post Treatment</option> 
     </select> 
    </div> 
    <hr class="divider"> 
    <div class="form-wrapper"> 
     <div class="form-group"> 
      <label for="id_form-0-image">Image</label> 
      <input id="id_form-0-image" name="form-0-image" type="file"> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-0-type">Type</label> 
      <select class="form-control input-sm" id="id_form-0-type" name="type"> 
       <option value="" selected="selected">---------</option> 
       <option value="xray">X-ray Image</option> 
       <option value="internal">Intraoral Image</option> 
       <option value="external">Extra-oral Image</option> 
       <option value="model">Model</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label for="id_form-0-desc">Desc</label> 
      <select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc"> 
       <option value="" selected="selected">---------</option> 
       <optgroup label="Xray" /> 
       <option value="PA Ceph">PA Ceph</option> 
       <option value="Lateral Ceph">Lateral Ceph</option> 
       <option value="Panoramic">Panoramic</option> 
       <optgroup label="Interior oral"> 
       <option value="Anterior Occlution">Anterior Occlution</option> 
       <option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option> 
       <option value="Overjet Right">Overjet Right</option> 
       <option value="Overjet Left">Overjet Left</option> 
       <option value="Right Occlusion">Right Occlusion</option> 
       <option value="Left Occlusion">Left Occlusion</option> 
       <option value="Upper Occlusal">Upper Occlusal</option> 
       <option value="Lower Occlusal">Lower Occlusal</option> 
       <optgroup label="External oral" /> 
       <option value="Frontal">Frontal</option> 
       <option value="Lateral Right">Lateral Right</option> 
       <option value="Lateral Left">Lateral Left</option> 
       <option value="Oblique smile Right">Oblique smile Right</option> 
       <option value="Oblique smile Left">Oblique smile Left</option> 
       <option value="Frontal smile">Frontal smile</option> 
       <option value="Oblique Right">Oblique Right</option> 
       <option value="Oblique Left">Oblique Left</option> 
       <optgroup label="Model"/> 
       <option value="Model Upper Occlusal">Model Upper Occlusal</option> 
       <option value="Model Lower Occlusal">Model Lower Occlusal</option> 
       <option value="Model Right Buccal">Model Right Buccal</option> 
       <option value="Model Left Buccal">Model Left Buccal</option> 
       <option value="Model Anterior Dental">Model Anterior Dental</option> 
      </select> 
     </div> 
    </div>       
</form> 
<div class="row"> 
    <button class="btn btn-sm btn-success pull-right" id="add-form">+</button> 
</div> 

ADD按鈕接一個地增加了一個新的形包裝元素和增量內正確的輸入字段，以使django的model_formset正常工作。每個新的表單包裝元素都包含一個刪除按鈕以刪除它。在刪除javascript更正了id和值，formset才能正常運行。我已經完成了它的工作，但是使用了很多方法。你認爲是一個更好的方法來做到這一點？

的JavaScript

$(document).on('click','.delete', function (e){ 
    e.preventDefault(); 
    var forms; 
    var index = parseInt($(this).prop('id')) - 1;   
    var formWrapper = $(".form-wrapper")[index];   
    formWrapper.remove(); 
    forms = $(".form-wrapper"); 
    $("#id_form-TOTAL_FORMS").val(parseInt($("#id_form-TOTAL_FORMS").val()) - 1); 
    forms = $('.form-wrapper'); 
    forms.each(function (index, item){ 
     var form_groups = $(item).children('.form-group'); 
     form_groups.each(function (index2, item2){ 
      controls = $(item2).children(); 
      controls.each(function(index3, item3){ 
       var id = $(item3).prop('id'); 
       parts = id.split('-'); 
       parts[1] = String(index); 
       id = parts.join('-'); 
      }); 
     }); 
    }); 
    $('button.delete').each(function(index, item){ 
     var id = parseInt($(item).prop('id'));    
     id = index + 2; //First start button starts with id=2 as in "delete 2nd form" 
     console.log('id after '+id); 
     $(item).prop('id', id); 
    }); 
}); 

Basicaly採取formwrappers知道如何形式有哪些，採取每個孩子（的形式組），然後每個孩子（控制單元），並改變他們的ID。速度沒有任何問題，但效果很好，但不喜歡它的清潔。

Answer 1

您可以使用.attr（）之類

$('button.delete').attr('id', function (index, item) { 
    return index + 2; 
}); 

演示：Fiddle