Hide 1st outer repeater in jQuery form repeater

Question

$(document).ready(function () {
            $('.outer-repeater').repeater({
                show: function() {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    if(confirm('Outer delete sure?')) {
                        $(this).slideUp(deleteElement);
                    }
                },
               
                repeaters: [{
                    selector: '.inner-repeater',
                    hide: function (deleteElement) {
                        if(confirm('Inner delete sure?')) {
                            $(this).slideUp(deleteElement);
                        }
                    },
                    show: function() {
                        $(this).slideDown();
                    }
                }]
           
            });
        });

I've stuck for 2 days. So here is my questions:

1. How to hide 1st outer repeater after initializing? It will appear only after clicking add button.
2. I receive 2 delete Outer delete confirmation followed by inner delete confirmation when I try delete inner item. I've read similar topics but I couldn't figure out in my code. https://github.com/DubFriend/jquery.repeater/issues/42

Answer 1

For your first question: "How to hide 1st outer repeater after initializing? It will appear only after clicking add button."

• Choice #1

You can add style="display:none;" to your first data-repeater-item Example:

<form class="repeater">
    <div data-repeater-list="group-name">
      <div data-repeater-item style="display:none;">
        ...
        <input data-repeater-delete type="button" value="Delete"/>
      </div>
    </div>
    <input data-repeater-create type="button" value="Add"/>
</form>

• Choice #2

Another choice is to delete the element

$('#filters_repeater').repeater({
    initEmpty: false,

    show: function () {
        $(this).slideDown();
    },

    hide: function (deleteElement) {
        $(this).slideUp(deleteElement);
    }
});

// Delete first element on the repeater as it is only to define the structure to repeat
$('#filters_repeater').find('[data-repeater-delete]').click();

Answer 2

        $('.outer-repeater').repeater({
        //--------> just add this here<-------
            initEmpty: true,
        // ------------------------
            show: function() {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                if(confirm('Outer delete sure?')) {
                    $(this).slideUp(deleteElement);
                }
            },
           
            repeaters: [{
                selector: '.inner-repeater',
                hide: function (deleteElement) {
                    if(confirm('Inner delete sure?')) {
                        $(this).slideUp(deleteElement);
                    }
                },
                show: function() {
                    $(this).slideDown();
                }
            }]
 
        });