动态添加和删除输入

Posted 2023-03-14

【中文标题】动态添加和删除输入

【英文标题】：Adding and deleting inputs dynamically

【发布时间】：2017-06-23 15:37:30

【问题描述】：

我想将行添加到已经动态生成的公式中。

这是我尝试做的：

首先我生成视图：

 @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>");
    );
);

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

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

【问题讨论】：

为什么<div class="row" id="addrow"></div> 在每个 foreach 中？你不只需要其中一个吗？

" 我尝试了一个 li 来测试它是否会附加到最后一个孩子，但它会附加到第一个孩子。"既然你附加了同样的东西，你怎么知道？

【参考方案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>");
    );
);

【参考方案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);
    );
);