删除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输入数组元素

回答

相关问题