使用JQuery动态重复和删除表单元素

OneMoreError

我有一个带有其他添加和删除按钮的表单。单击这些按钮后，将重复或完全删除同一表格行。

    <script>
        function addFormElements(current) {
            $(current).parent().parent().append($(current).parent().parent().html());
        }
    
        function removeFormElements(current) {
            $(current).parent().parent().remove();
        }
    </script>

<div class="container">
        <div class="row justify-content-center align-items-center">
            <div class="col-10 col-md-10 col-lg-8">
                <form>
                    <div class="form-row" style="padding-top: 50px;" id="someId">
                        <div class="form-group col-md-4">
                            <select class="selectpicker form-control single-select" placeholder="Select an Option..." required>
                                <option></option>
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Barbecue</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <input type="password" class="form-control" placeholder="">
                        </div>
                        <div class="form-group col-md-1">
                            <button type="button" class="btn btn-success" onclick="addFormElements(this)">+</button>
                        </div>
                        <div class="form-group col-md-1">
                            <button type="button" class="btn btn-danger" onclick="removeFormElements(this)">-</button>
                        </div>
                    </div>
    
                    <div class="form-row" style="padding-top: 50px;">
                        <button type="button" class="btn btn-primary">
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

您可以在JSFiddle上查看相同的演示。

问题1：添加行

当我第一次单击+按钮时，它将添加一行。

上面变成了这个：

但是，如果我再单击一次+按钮，则会添加2行。之后，添加4行，依此类推。

问题2：删除行

同样，单击-按钮，将删除整行。理想情况下，它应该仅当前行。

我想我在这里缺少一些非常基本的东西（关于找出路径），但是即使经过多次尝试也无法使其运行。有人可以看看。

格里多

这是因为您需要克隆元素，否则将保留相同的指针，因此删除一个指针将导致删除整个列表。此解决方案保留了您的风格：

function addFormElements(current) {
    $(current).parents('.form-list').append($(current).parents('.form-row').clone())
}

function removeFormElements(current) {
    $(current).parents('.form-row').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row justify-content-center align-items-center">
        <div class="col-10 col-md-10 col-lg-8">
            <form>
               <div class="form-list">
                <div class="form-row" style="padding-top: 50px;" id="someId">
                    <div class="form-group col-md-4">
                        <select class="selectpicker form-control single-select" placeholder="Select an Option..." required>
                            <option></option>
                            <option>Mustard</option>
                            <option>Ketchup</option>
                            <option>Barbecue</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="password" class="form-control" placeholder="">
                    </div>
                    <div class="form-group col-md-1">
                        <button type="button" class="btn btn-success" onclick="addFormElements(this)">Add</button>
                    </div>
                    <div class="form-group col-md-1">
                        <button type="button" class="btn btn-danger" onclick="removeFormElements(this)">Remove</button>
                    </div>
                </div>
                </div>
                <div class="form-row" style="padding-top: 50px;">
                    <button type="button" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

改进的解决方案将使用被动事件侦听器来拆分HTML和JS，并可能使用单独的模板进行克隆（在您的解决方案中，编写一个元素，然后单击“添加”将导致两个项目具有相同的内容）。

function addFormElements() {
    $('.form-list').append($("#form-template .form-row").clone())
}

function removeFormElements() {
    $(this).parents('.form-row').remove();
}

$(document).ready(addFormElements); 
$(document).on("click", ".add-btn", addFormElements);
$(document).on("click", ".remove-btn", removeFormElements);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row justify-content-center align-items-center">
        <div class="col-10 col-md-10 col-lg-8">
            <form>
               <div class="form-list">
                
                </div>
                <div class="form-row" style="padding-top: 50px;">
                    <button type="button" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    
    <div id="form-template" style="display: none"> 
      <div class="form-row" style="padding-top: 50px;">
        <div class="form-group col-md-4">
            <select class="selectpicker form-control single-select" placeholder="Select an Option..." required>
                <option></option>
                <option>Mustard</option>
                <option>Ketchup</option>
                <option>Barbecue</option>
            </select>
        </div>
        <div class="form-group col-md-6">
            <input type="password" class="form-control" placeholder="">
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="btn btn-success add-btn">Add</button>
        </div>
        <div class="form-group col-md-1">
            <button type="button" class="btn btn-danger remove-btn">Remove</button>
        </div>
    </div>
  </div>
    
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。