删除HTML输入数组元素
问题描述:
以下面的代码,例如:删除HTML输入数组元素
<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?
这可以通过重建删除元素后的每个元素来完成,但它只是感觉我错过了某些东西,就像有一个更简单的方法去做。
答
暂时直到我自己熟悉与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
没有。他们必须通过代码进行更新。 ......“更简单”的方式是使用一个将您的工作从您身边抽象出来的框架。像反应或角度。 –
我推荐淘汰赛;-) http://knockoutjs.com/examples/betterList.html –
vue.js怎么样?因为它现在似乎与laravel相结合。 – commanderZiltoid