Скрыть div изначально в jquery clone

Question

Я зацикливаю кнопку div на кнопке. Но мне нужно, чтобы сначала скрыть div .loop и отобразить его при нажатии кнопки.

В настоящее время это клон происходит отлично, только мне нужно, чтобы не показывать div.loop изначально. Показывать только кнопку по умолчанию.

вот мой текущий код и DEMO

clicks = 0; 
$('button').on('click', function() { 
    if ($('div.loop').length < 5) { 
     clicks++; 
     newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
     $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
    } 
}); 

Answer 1

clicks = 0; 
$('button').on('click', function() { 
    $('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      alert("more 1"); 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
     } 
     else{ 
      alert("asd"); 
     newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 


    } 

    } 
}); 

Заменить и попробовать этот код с yours..Hope это то, что вам нужно ..

JSBIN DEMO

Answer 2

У вас есть пара вариантов здесь. Сначала вы можете скрыть свой шаблон с помощью CSS, а затем на клоне, удалить CSS, скрывающий клон. Другой вариант - создать ваш элемент «loop» целиком с помощью JavaScript и прикрепить его позже.

Demo Option 1 - Используйте класс скрыть на первом шаблоне div.loop, удалите класс на клоне с использованием .removeClass().

Demo Option 2 - Используйте шаблон, созданный в jQuery, вместо выбора элемента оболочки.

Примечание: Я обновил атрибут имени first name до first_name.