動態添加和刪除輸入

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); 
    }); 
});