在追加时清除所有输入文本框值

Question

我想要的是，当我点击add more时，用空白值追加所有文本框add more功能正常工作，但在追加输入框时，用值追加，但我想清除文本框值。

 <table>
    <tbody>
    <tr class="topdivdata">
    <td> <input type="text" value="First Name"></td>
    <td> <input type="text" value="Last Name"></td>
    <td> <input type="text" value="Mobile Number"></td>
    </tr>
    <tr role="row" class="odd">
    <td>
    <span class="btn btn-xs cic" id="addnewunit">
    <i class="icon-plus"></i>+ Add More</span>
    </td>   
    </tr>
    </tbody>
    <tbody id="addmoreunit"></tbody>
    </table>
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    <script>
    unitcount=1;
     $('#addnewunit').click(function()
                {
                 var topdiv = $('.topdivdata').html();  
                 var refresdiv=topdiv;
            $('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');    
    unitcount++;
        var value = $('.target').val();
                    $('.list').val(value);
                    $('.removes1').click(function()
                        {
                            $(this).parent().remove();
                        });
    });
    </script>

 i want to when i click on add more append all text box with blank value add more function properly working but at append time input box upend with value but i want to clear text box value 
 <table>
    <tbody>
    <tr class="topdivdata">
    <td> <input type="text" value="First Name"></td>
    <td> <input type="text" value="Last Name"></td>
    <td> <input type="text" value="Mobile Number"></td>
    </tr>
    <tr role="row" class="odd">
    <td>
    <span class="btn btn-xs cic" id="addnewunit">
    <i class="icon-plus"></i>+ Add More</span>
    </td>   
    </tr>
    </tbody>
    <tbody id="addmoreunit"></tbody>
    </table>
    
    <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
    
    <script>
    unitcount=1;
     $('#addnewunit').click(function()
    			{
    			 var topdiv = $('.topdivdata').html();	
    			 var refresdiv=topdiv;
    		$('#addmoreunit').append('<tr>.'+refresdiv+'.<td class="removes1"><span class="btn btn-xs"><i class="icon-plus"></i>- Remove</span></td></tr>');	
    unitcount++;
    	var value = $('.target').val();
    				$('.list').val(value);
    				$('.removes1').click(function()
    					{
    						$(this).parent().remove();
    					});
    });
    		
    </script>

Answer 1

不理解你的问题，但你可以这样做，

<table>
 <tbody>
    <tr class="topdivdata">
        <td>
            <input type="text" value="First Name">
        </td>
        <td>
            <input type="text" value="Last Name">
        </td>
        <td>
            <input type="text" value="Mobile Number">
        </td>
    </tr>
    <tr role="row" class="odd">
        <td>
            <span class="btn btn-xs cic" id="addnewunit" style="cursor:Pointer;">
                <i class="icon-plus"></i>+ Add More
            </span>
        </td>
    </tr>
</tbody>
<tbody id="addmoreunit"></tbody>
</table>

脚本就像

 var unitcount = 1;
$('#addnewunit').click(function () {
    //Here i cloned your topDiv, so that i can add new inputs.
    var CloneTopDiv = $('.topdivdata').clone(true);
    CloneTopDiv.find(':input').attr('value', '');
    CloneTopDiv.attr('class', 'txtInput')
    CloneTopDiv = CloneTopDiv.html();
    var refresdiv = CloneTopDiv;
    $('#addmoreunit').append('<tr>.' + refresdiv + '.<td class="removes1"><span class="btn btn-xs" style="cursor:Pointer;"><i class="icon-plus"></i>- Remove</span></td></tr>');
    unitcount++;
    var value = $('.target').val();
    $('.list').val(value);
    //Code for Remove added row
    $('.removes1').click(function () {
        $(this).parent().remove();
    });
    //Clearing Code
    $('.txtInput').val('')
});

请参阅上的解决方案https://jsfiddle.net/eua98tqa/3/