Dodaj dynamiczny div na kliknij

Question

Mam wymóg dodawania wielu pól wprowadzania, aby wprowadzić dane. Początkowo będzie tylko jedno pole wprowadzania, a obok każdego wygenerowanego pola wejściowego znajduje się przycisk "Dodaj", aby wygenerować wiele pól tekstowych.

Jeśli spojrzysz na moje skrzypce, są 3 poziomy pól tekstowych na 1. poziomie, możesz wybrać tylko 1 poziom danych, ale jeśli chodzi o poziom 2, powinna istnieć opcja utworzenia drugiego poziomu tego samego rodzica blokuj, abyśmy mogli wprowadzić dane pomocnicze głównego kursu. Na przykład, jeśli piszę nazwę państwa, wówczas będę mógł wejść podkategorii ..

Oto kod do menu poziom 1

$(document).ready(function(){ 

    $(":radio").click(function(){ 
     $(".test").hide(); 
     var show = $(this).attr("data-show"); 
     $("#"+show).show(300) 
    }); 
     $('.sort').hide(); 
     $filtr = $('.filtr'); 

     $filtr.on('click', '.add', function(){ 
      $(this).closest('.loop').clone().appendTo($(this).closest('.test')); 

      $('.sort').show(); 
     }); 

     $filtr.on('click', '.del', function(){ 
      $(this).closest('.loop').remove(); 
     }); 

     $('#1lev, #2lev, #3lev').hide(); 

    //For sort up/down 
    function moveUp(item) { 
    var prev = item.prev(); 
    if (prev.length == 0) 
     return; 
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function() { 
     prev.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertBefore(prev); 
    }); 
} 
function moveDown(item) { 
    var next = item.next(); 
    if (next.length == 0) 
     return; 
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250); 
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function() { 
     next.css('z-index', '').css('top', '').css('position', ''); 
     item.css('z-index', '').css('top', '').css('position', ''); 
     item.insertAfter(next); 
    }); 
} 

$(".filtr").sortable({ items: ".loop", distance: 10 }); 
$(document).on("click", "button.sort", function() { 
    var btn = $(this); 
    var val = btn.val(); 
    if (val == 'up') 
     moveUp(btn.parents('.loop')); 
    else 
     moveDown(btn.parents('.loop')); 
}); 

}); 

FIDDLE

Wymagane wynik

Jak sklonować class="filtr" div jako panel drugiego poziomu, który działa dokładnie tak samo, jak panel pierwszego poziomu?

oczekiwaną strukturę kod powinien być jak ten

<div class="filtr"> 
     <!-- we'll clone this one... --> 
     <div class="test" id="2lev"> 
     <div class="loop"> 
      <button value='up' class="sort">Up</button> 
      <button value='down' class="sort">Down</button> 
      <input type="text" /> 
      <button class="btn del">x</button> 
      <button class="btn add">Add</button> <button class="btn level">></button> 

<!--Need to add this div here--> 
      <div class="filtr"> 
     <!-- we'll clone this one... --> 
     <div class="test"> 
     <div class="loop"> 
      <button value='up' class="sort">Up</button> 
      <button value='down' class="sort">Down</button> 
      <input type="text" /> 
      <button class="btn del">x</button> 
      <button class="btn add">Add</button> 
     </div> 
     </div> 
     <!-- here ...--> 
    </div> 
<!--Need to add this div here--> 

     </div> 
     </div> 
     <!-- here ...--> 
    </div> 

Answer 1

Tu jest jsfiddle.net/VMBtC/28

code 

Ale nie robię tego Klon hink jest najlepszym rozwiązaniem do tego, przynajmniej szablon klon nie jest aktywnym elementem. Ale ten kod nadal wymaga dużo pracy.

Answer 2

Można spróbować API parentsUntil uzyskać div FILTR

http://api.jquery.com/parentsUntil/

Answer 3

Inne rozwiązanie.

http://jsfiddle.net/VMBtC/17/

$filtr.on('click', '.level', function(){ 
      var c = $('<div class="filtr insideFiltr" style="padding-left:10px">'+ 
      '<div class="test" id="4lev">' + 
      '<div class="loop">'+ 
       '<button value="up" class="sort">Up</button>'+ 
       '<button value="down" class="sort">Down</button>'+ 
       '<input type="text" />'+ 
       '<button class="btn del">x</button>'+ 
        '<button class="btn add">Add</button>'+ 
      '</div>'+ 
       '</div>'+ 
      '</div>'); 

      c.insertAfter($(this)); 


     });