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

Question

我有一个表单，其中包含额外的添加和删除按钮。点击这些按钮后，相同的表单行将被重复或完全删除。

    <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：删除行

同样地，单击“-”按钮会删除整行。理想情况下，应该只删除当前行。

我觉得我在这里漏掉了一些非常基本的东西（关于找到路径），但即使尝试多次也无法运行它。有人能看一下吗？

- OneMoreError

Answer 1

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

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>

- Greedo

---

非常感谢您特别提供基于独立模板的方法！ - OneMoreError