Динамически повторять и удалять элементы формы, используя 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: Добавление строк

Когда я нажимаю кнопку «+» в первый раз, добавляется одна строка.

The above becomes this:

However, if I add click on the + button one more time, then 2 rows are added. After that 4 rows are added and so on.

введите описание изображения здесь

Проблема 2: Удаление строк

Аналогичным образом, при нажатии кнопки - вся строка удаляется. В идеале это должна быть только текущая строка.

Я думаю, мне не хватает чего-то довольно базового c здесь (о выяснении путей), но я не могу запустить его даже после нескольких попыток. Может кто-нибудь, пожалуйста, посмотрите.

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>