Question

I’m using the following code to clone a row in a table when the user clicks on the Add button:


$('.addButton').click(function () {
$('#quotesTable tbody>tr:last').clone(true).insertAfter('#quotesTable tbody>tr:last');
});

How can I clear the values of a the new row being added so that they are empty? For example if the user selects a listbox value, and enters text into a text box, then clicks on add, the same exact row is copied with the values selected and entered.

I need the newly added row to be empty.

Thanks

Answer 1

You could use the find method to find all text inputs within the clone and clear their value using the val method, passing an empty string as the argument:

$('.addButton').click(function () {
    var clone = $('#quotesTable tbody>tr:last').clone(true);
    clone.find("input[type='text'], select").val("");
    clone.insertAfter('#quotesTable tbody>tr:last'); 
});

You may want to modify the input[type='text'], select selector if you have other controls you wish to clear as well.