jquery Пример скрипта для добавления строк формы -- множественных полей. Скрытие родительского элемента (вложенные документы)

Вот такой пример:

$(function () {


    var mainContainerSelector = '.box-add';
    var PrototypeContainerSelector = '.copy-box';
    var RowSelector = '.holder-inp';
    var deleteElementSelector = '.close-box'; // по чем кликаем, чтобы удалить строку (подразмевается, что жлемент удаления есть в каждой "строке" формы)
    
    var $researchLine = $(PrototypeContainerSelector);
    var $researchContainer = $(mainContainerSelector);
    var researchIndex = $(mainContainerSelector + " > " + RowSelector).length; // вложенные стоки должны быть непосредственными потомками
    var $researchRow  = $researchLine.clone();
    $researchLine.remove();
 
    console.log('researchIndex', researchIndex);
    
    
   function addResearchRow() {
        console.log('add row!!', 'RR=', $researchRow.html());
        $researchContainer.append($researchRow.html().replace(/%elem_number%/g, researchIndex));
        
        researchIndex++;
           
        return false;
    }
    
    $('.plus').off("click"); // вырубаем иные обработчики
    $(document).on("click", '.plus', function() { // добавляем строчку c полями (таблица)
        addResearchRow();
        
        return false;
    });
    
    
    $('body').on('focus',"input.datepicker_recurring_start", function(){ // привязываем датапикер для динамически добавляемых элементов
       console.log('bind', researchIndex);
       $(this).removeClass('datepicker_recurring_start');
        $(this).datetimepicker();
    });
    
    
    $(document).on("click", deleteElementSelector, function() { // удаляем элемент

        $element = $(this).parent(); // получаем родителя

        $element.stop().animate({ // анимация средствами JQuery

                height: "0px", // высоту к нулю
                width: "0px", // высоту к нулю
                opacity: 0, // прозрачность к нулю
            }, 600, function() {
                $(this).remove(); 
            }
        );

        researchIndex--;
        
        return false;
    });

}

)

При этом шаблон, который используется для добавления строки может быть сколь угодно сложным -- главное, чтобы в нём было что заменить в массиве:

<div class="copy-box" style="display: none">
	<div class="criteria__main bord" >
		<div class="row">
			<div class="col left">
					<div class="selects">
							<label>
									<span class="text-center">
											<span class="text-inner">
													<span class="text-last">
															Код теста:
													</span>
											</span>
									</span>
							</label>
							<div class="hold-select">
								<input class="form-control input-text" name="PrimaryReport[research_results][%elem_number%][test_code]" type="text" placeholder="код теста" value="" />

							</div>
					</div>
			</div>
			<div class="col middle">
					<div class="selects">
							<label>
									<span class="text-center">
											<span class="text-inner">
													<span class="text-last">
															 Результат:
													</span>
											</span>
									</span>
							</label>
							<div class="hold-select">
								<input class="form-control input-text" name="PrimaryReport[research_results][%elem_number%][result]" type="text" placeholder="" value="" />

							</div>
					</div>
			</div>
			<div class="col right">
					<div class="selects">
							<label for="datetimeEsFrom data-lable">
									<div class="text-center">
											<div class="text-inner">
													<div class="text-last">
															Дата и время
													</div>
											</div>
									</div>
							</label>
							<div class="date-event databox">
									<div class="hold-data">
										<input  name="PrimaryReport[research_results][%elem_number%][timestamp]" class="datepicker_recurring_start criteria--datetime" type="text" placeholder="" value=""  />
											<!-- <input class="criteria--datetime datepicker" name="datetimeEsFrom"  alt="" type="text"> -->
											<span></span>
											<a class="dateTimePicker" data-for="#datetimeEsFrom" href="#xbSWJ0iJID">
													<i class="fa fa-calendar" aria-hidden="true"></i>
											</a>
									</div>
							</div>
					</div>
			</div>
			<a class="close-box" href="#">
					<span>
							<img src="/es/images/icon-close-inner.png" alt="image" />
					</span>
			</a>
		</div>
</div>
</div>