使用jQuery克隆div

Question

Based on the question asked Generalizing jQuery dynamic add/remove form input for multiple forms . I was able to add several functionalities in my project but was unable to clone the input fields without making button disappear.

I tried cloning the entire div using jquery clone div and append it after specific div but still was unsuccessful.

So my question is how can I clone the input fields along with the buttons without making buttons( 'add','cancel' and 'save' ) of previously cloned elements disappear. After clicking on ADD button, all the three buttons of the last element should remain.

here is what I have tried: jsfiddle

following is the java script:

 $(document).ready(function() {
    $("#table1").hide();
    $("#table2").hide();
    $("#services").click(function(){
        $("#table1").slideToggle();
        $("#table2").hide();
        $("#cctable tr").attr('class', 'dinput');
        $("#dbtable tr").attr('class', 'dbinput');
        $('.btnDel').attr('disabled','disabled');
    });

    $("#products").click(function(){
        $("#table2").slideToggle();
        $("#table1").hide();
        $("#dbtable tr").attr('class', 'dinput');
        $("#cctable tr").attr('class', 'ccinput');
        $('.btnDel').attr('disabled','disabled');
    });
    $('.btnAdd').click(function() {

        var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
        var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('.dinput:last').clone();

        // insert the new element after the last "duplicatable" input field
        $('.dinput:last').after(newElem);
        $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

        // enable the "remove" button
        $('.btnDel').attr('disabled','');


        // business rule: you can only add 10 names
          if (newNum == 10)
            $('.btnAdd').attr('disabled','disabled');
    });

    $('.btnDel').click(function() {
        var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
        $('.dinput:last').remove();     // remove the last element

        // enable the "add" button
        $('.btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('.btnDel').attr('disabled','disabled');
    });


});

Answer 1

Updated FIDDLE

HTML

    <h2 align="center">Add Services And Products To Your Proposal</h2>
<div id="whole">
    <div id="tablebuttons">
        <input type="button" value="Add Services"id="services"  > 
        <input type="button" value="Add Products"id="products" >
    </div>
    <div id="table1">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="cctable" >
                        <tr class="ccinput">
                            <td> 1 </td>
                            <td> <input type="text" name="cc_ser[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>

                            <td>
                              <input type="button" class="btnAdd" id="add" value="Add" onclick="addrow()" />
            <input type="button" class="btnDel" value="Cancel" id="btnDel" onclick="removerow(this)" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>
        </form>
    </div>

    <div id="table2">

        <form id="ccards" method="post">
            <table cellspacing="5">
                <tr>
                    <th></th>
                    <th align="center">Name:</th>
                    <th align="center">Description:</th>
                    <th align="center">Action:</th>
                </tr>
                    <tbody id ="dbtable" >
                        <tr class="dbinput">
                            <td> 1 </td>
                            <td> <input type="text" name="db_pro[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>
                            <td>
                              <input type="button" class="btnAdd" onclick="addrow();" id="add" value="Add" />
            <input type="button" class="btnDel" value="Cancel" onclick="removerow(this);" id="btnDel" />
            <input type="button" name="save" value="Save" id="save" />                                   
                            </td>
                        </tr>
                    </tbody>
            </table>

        </form>
    </div>
</div>

Jquery

    $(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#services").click(function(){
            $("#table1").slideToggle();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
            $('#btnDel').attr('disabled','disabled');
        });

        $("#products").click(function(){
            $("#table2").slideToggle();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
            $('#btnDel').attr('disabled','disabled');
        });

    });

function addrow()
{
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
if (newNum > 1)
            // enable the "remove" button
            $(newElem).find('.btnDel').attr('disabled','');


            // business rule: you can only add 10 names
              if (newNum == 10)
                $('.btnAdd').attr('disabled','disabled');
}

function removerow(sender)
{
            $(sender).parent().parent().remove();
}

Answer 2

Updated: http://jsfiddle.net/YRwmB/3/

You need to add the line: newElem.find("input").val(''); for this to work.