刪除HTML輸入數組元素

-1

<div id="instructor_trainers">  

    <div id="trainer-1" class="trainer-group form-group row"> 
     <div class="col-md-6"> 
      <select class="form-control" id="trainers[1][trainer]" name="trainers[1][trainer]"> 
       <option value="">-- Select --</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[1][expiration]" name="trainers[1][expiration]" value=""> 
     </div> 
     <div class="col-xs-12"> 
      <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[1][comments]" name="trainers[1][comments]"></textarea> 
     </div> 
    </div> 

    <div id="trainer-2" class="trainer-group form-group row"> 
     <div class="col-md-6"> 
      <select class="form-control" id="trainers[2][trainer]" name="trainers[2][trainer]"> 
       <option value="">-- Select --</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[2][expiration]" name="trainers[2][expiration]" value=""> 
     </div> 
     <div class="col-xs-12"> 
      <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[2][comments]" name="trainers[2][comments]"></textarea> 
     </div> 
    </div> 

    <div id="trainer-3" class="trainer-group form-group row"> 
     <div class="col-md-6"> 
      <select class="form-control" id="trainers[3][trainer]" name="trainers[3][trainer]"> 
       <option value="">-- Select --</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <input type="text" class="trainer-expiration form-control" placeholder="Expiration" id="trainers[3][expiration]" name="trainers[3][expiration]" value=""> 
     </div> 
     <div class="col-xs-12"> 
      <textarea class="trainer-comments form-control" placeholder="Comments" id="trainers[3][comments]" name="trainers[3][comments]"></textarea> 
     </div> 
    </div> 

</div>

DIV instructor_trainers的內部每個訓練者元件由三個輸入字段，它們都包含在trainers陣列的內部的。無論何時創建新元素，索引都是通過將現有元素數增加1來找到的。當一個元素被刪除時，這個值減1，並且元素只能按照他們添加的順序被刪除（所以如果我點擊我的刪除按鈕，教練員3將被刪除，然後教練員2，最後是教練員1）。

有沒有辦法自動更新數組索引，如果一個元素被無序刪除。例如，如果我更改了刪除功能以刪除特定的ID（如trainer-2），是否有辦法在刪除的元素之後移動所有元素的索引值？因此，如果trainer-2被刪除，那麼trainer-3中的三個輸入將其索引值轉換爲2？

這可以通過重建刪除元素後的每個元素來完成，但它只是感覺我錯過了某些東西，就像有一個更簡單的方法去做。

來源

2017-06-01 commanderZiltoid

沒有。他們必須通過代碼進行更新。 ......「更簡單」的方式是使用一個將您的工作從您身邊抽象出來的框架。像反應或角度。 –

我推薦淘汰賽;-) http://knockoutjs.com/examples/betterList.html –

vue.js怎麼樣？因爲它現在似乎與laravel相結合。 – commanderZiltoid

暫時直到我自己熟悉與vue.js或react.js前端框架，我打電話以下功能，重新索引的所有元素：

function reindexTrainerElements(){ 

    $(".trainer-group").each(function(index) { 

     var prefix = "trainers[" + index + "]"; 
     $(this).find("select").each(function() { 
      this.id = this.id.replace(/trainers\[\d+\]/, prefix); 
      this.name = this.name.replace(/trainers\[\d+\]/, prefix); 
     }); 
     $(this).find("input").each(function() { 
      this.id = this.id.replace(/trainers\[\d+\]/, prefix); 
      this.name = this.name.replace(/trainers\[\d+\]/, prefix); 
     }); 
     $(this).find("textarea").each(function() { 
      this.id = this.id.replace(/trainers\[\d+\]/, prefix); 
      this.name = this.name.replace(/trainers\[\d+\]/, prefix); 
     }); 

    }); 

}

這是一個變化Shawns回答於this question

來源

2017-06-01 20:11:33 commanderZiltoid

刪除HTML輸入數組元素

回答

相關問題