javascript - Add a dynamic div on click

Question

I have a requirement to add multiple input boxes to enter the data. Initially there will be only one input box and there is an "Add" button next to each generated input boxes to generate multiple text boxes.

If you look at my fiddle there are 3 levels of text boxes in 1st level it has option to enter only 1 level of data but when it comes to level 2, there should be an option to create second level of same parent block so that we can enter the sub data of the main heading. For example If I write State name then I should be able to enter sub categories..

Here is the code for the 1st level menu

$(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

Required result

How to clone the class="filtr" div as second level panel which works exactly the same as 1st level panel?

Expected code structure should be like this

    <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

这里是 jsfiddle.net/VMBtC/28

code

但我不认为克隆是最好的解决方案，至少克隆模板不是活动元素。但是这段代码仍然需要很多工作。

Answer 2

另一种解决方案。

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));


      });

Answer 3

您可以尝试使用 parentsUntil API 来获取过滤器 div

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