javascript - 使用 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:删除行

同样，单击 - 按钮时，整行都会被删除。理想情况下，它应该只有当前行。

我想我在这里遗漏了一些非常基本的东西(关于找出路径)，但即使经过多次尝试也无法让它运行。有人可以看看吗。

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>