Динамическое добавление и удаление входов

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 

То, что я хочу, чтобы генерировать пустой вход со своим собственным удаления кнопки и же дивы.

Вот мои 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.

Моя вторая попытка с 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' для каждой итерации в цикле? У вас будет куча дублированных идентификаторов. Вероятно, он добавляется к первому 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); 
    }); 
});