Добавить и удалить несколько текстовых полей динамически

Question

Отредактировано:

Я хочу создать, добавить, удалить вложенное текстовое поле динамически, например:

https://i.ibb.co/rpcJF16/tombol.png

Я обыскиваю вокруг net, но до сих пор не знаю, как это исправить.

$(document).ready(function() {
        var max = 10;
        var cnt = 1;
        $(".add-textbox").on("click", function(e){
            e.preventDefault();
            if(cnt < max){
                cnt++;
                $(".textbox-wrapper").append('<div class="textbox-ucrit"><div class="textbox-unyil"><label for="field-3" class="control-label">Uraian</label><div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-danger remove-textbox">-</button></span><input name="text_arr[]" type="text" class="form-control no-left-border form-focus-danger"></div></div><div class="textbox-unyil"><label for="field-4" class="control-label check-margin10">Tahapan</label><div class="input-group check-margin10"><span class="input-group-btn"><button type="button" class="btn btn-info add-textbox2">+</button></span><input name="text_arr2[]" type="text" class="form-control no-left-border form-focus-info"></div></div></div>');
            }
        });


        $(".textbox-wrapper").on("click",".remove-textbox", function(e){
            e.preventDefault();
            $(this).parents(".textbox-ucrit").remove();
            cnt--;
        });


    });

Не удалось после создания второго элемента.

Это полный код: https://codepen.io/bambang-setiawan/pen/qBdgjJZ

Пожалуйста, помогите.

Answer 1

Наконец-то я получил решение самостоятельно после часового эксперимента.

Вот что я имею в виду:

   $(document).ready(function() {

        var max = 10;
        var cnt = 1;
        var htg = 1;

        $(".add-textbox").on("click", function(e){
            e.preventDefault();
            if(cnt < max){
                cnt++;
                htg++;
                //alert('#parent count: '+cnt+' - #parent created: '+htg);
                $(".textbox-wrapper").append('<div class="textbox-all"><div class="textbox-region-'+htg+'"><div class="textbox-section"><label for="field-3a" class="control-label">Uraian</label><div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-danger remove-textbox"><i class="glyphicon glyphicon-minus"></i></button></span><input name="uraian[]" type="text" class="form-control no-left-border form-focus-danger"></div></div><div class="textbox-section"><label for="field-3b" class="control-label check-margin10">Tahapan</label><div class="input-group check-margin10"><span class="input-group-btn"><button id="'+htg+'" type="button" class="btn btn-info add-textbox-sub"><i class="glyphicon glyphicon-plus"></i></button></span><input name="tahapan[]" type="text" class="form-control no-left-border form-focus-info"></div></div></div></div>');
            }
        });

        var maxx = 10;

        $(".textbox-wrapper").on("click", ".add-textbox-sub", function(e){
            e.preventDefault();

            var id = $(this).attr('id');
            //alert('#parent: '+id);

            if(isNaN(window['tes'+id])) {
                window['tes'+id] = 1;
            } else {
                window['tes'+id] += 1;
            }

            var cntt = window['tes'+id];

            if(cntt < maxx){
                cntt++;
                //alert('#child count: '+cntt);
                $(".textbox-region-"+id).append('<div class="textbox-section"><label for="field-3b" class="control-label check-margin10">Tahapan</label><div class="input-group check-margin10"><span class="input-group-btn"><button id="'+id+'" type="button" class="btn btn-warning remove-textbox-sub"><i class="glyphicon glyphicon-minus"></i></button></span><input name="tahapan[]" type="text" class="form-control no-left-border form-focus-warning"></div></div>');
            }
        });

        $(".textbox-wrapper").on("click",".remove-textbox", function(e){
            e.preventDefault();
            $(this).parents(".textbox-all").remove();
            cnt--;
        });

        $(".textbox-wrapper").on("click",".remove-textbox-sub", function(e){
            e.preventDefault();
            $(this).parents(".textbox-section").remove();

            var id = $(this).attr('id');
            //alert('#parent remove: '+id);
            window['tes'+id] -= 1;
        });



    });

https://codepen.io/bambang-setiawan/pen/qBdgjJZ

Спасибо за ваш добрый ответ.