动态添加和删除输入

Question

我想将行添加到已经动态生成的规则。

这是我尝试做：

首先我生成视图：

@foreach($items as $item) 
         <div class="form-group col-sm-2"> 
         <input type="text" class="form-control" name="item[]" value="{{$item->name}}"> 
         </div> 
         <div class="form-group col-sm-1"> 
         <button class="btn btn-danger-outline btn-sm" id="deleteitem"> 
          <i class="fa fa-trash"></i> Delete 
         </button> 
         </div> 
         <div class="row" id="addrow"></div> 
        @endforeach 

我要的是生成与自身的删除按钮，同样的div一个空的输入。

这是我的2次尝试。

先用纯JavaScript：

 <div class="card-footer"> 
      <button onclick="addInput(addrow);" type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button> 
     </div> 

的Javascript：

var counter = 0; 

function addInput(divName) { 

    var inputdiv = document.createElement('div'); 
    inputdiv.id = "item"+counter; 
    inputdiv.className = "form-group col-sm-2"; 
    inputdiv.innerHTML = "<input type='text' name='myitems[]' class='form-control'>"; 
    document.getElementById(divName).append(inputdiv); 

    var buttondiv= document.createElement('div'); 
    buttondiv.id = "button"+counter; 
    buttondiv.className = "form-group col-sm-1" ; 
    buttondiv.innerHTML = "<button class='btn btn-danger-outline btn-sm'><i class='fa fa-trash'></i> Löschen</button>"; 
    document.getElementById("item"+counter).append(buttondiv); 

    var rowdiv = document.createElement('div'); 
    rowdiv.id ="row"+counter; 
    rowdiv.className = "row"; 
    document.getElementById("button"+counter).append(rowdiv); 

} 

这就造成内海誓山盟的div我显然不希望。此外，新的元素添加后第一个不是最后一个div。

我与jQuery的第二次尝试：

<div class="card-footer"> 
     <button type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button> 
    </div> 

的Javascript：

$(document).ready(function(){ 
    $("#addItem").click(function(){ 
     $("#addrow").append("<li>Appended item test</li>"); 
    }); 
}); 

这一次，我尝试了李来测试它是否会被追加到最后一个孩子，而是其附加到第一个。

任何想法如何添加/删除@foreach中的元素每次我点击最后一个输入上的新项按钮？

Answer 1

所以你复制id='addrow'在你的循环每次迭代？你将会有一堆重复的ID。它可能附加到第一个addrow然后打破。我会将你的整个循环包装在一个容器中，然后追加到：

<div id="container"> 
    @foreach($items as $item) 
        <div class="form-group col-sm-2"> 
        <input type="text" class="form-control" name="item[]" value="{{$item->name}}"> 
        </div> 
        <div class="form-group col-sm-1"> 
        <button class="btn btn-danger-outline btn-sm" id="deleteitem"> 
         <i class="fa fa-trash"></i> Delete 
        </button> 
        </div> 
       @endforeach 
</div> 

$(document).ready(function(){ 
    $("#addItem").click(function(){ 
     $("#container").append("<li>Appended item test</li>"); 
    }); 
}); 

Answer 2

<div id="group"> 

@foreach($items as $item) 
    <div class="form-group col-sm-2"> 
    <input type="text" class="form-control" name="item[]" value="{{$item->name}}"> 
    </div> 
    <div class="form-group col-sm-1"> 
    <button class="btn btn-danger-outline btn-sm" id="deleteitem"> 
     <i class="fa fa-trash"></i> Delete 
    </button> 
    </div> 
@endforeach 

</div> <!--/#group --> 

的jQuery：

$(document).ready(function(){ 
    $("#addItem").click(function(){ 
     $("#group").append(template); 
    }); 
});