首页>Program>source

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

   <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

中查看有关该示例的演示。

Problem 1: Adding rows

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

以上内容变为:

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

Problem 2: Deleting rows

类似地,单击-按钮,将删除整行.理想情况下,它应该仅是当前行。

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

最新回答
  • 1月前
    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>
    

  • python:列表中的所有值都与附加元素相同
  • java:有没有一种有效的方法可以将元素从一个索引获取到集合中的另一个索引,而无需将其更改为ArrayList?