Clearing TextBox Values after being Cloned using jQuery

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

score 3 · Accepted Answer · answered Jan 18 '12 at 08:21

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.

score 0 · Answer 2 · answered Jan 18 '12 at 08:21

Try this:

$('.addButton').click(function () {
    var newRow = $('#quotesTable tbody>tr:last')
        .clone(true)
        .insertAfter('#quotesTable tbody>tr:last');
    newRow.find('.myselect').val(''); // replace with your default value and select class name
    newRow.find('.mytextbox').val(''); // replace with your default value and textbox class name
});

Clearing TextBox Values after being Cloned using jQuery

2 Answers2