How can I clone a row in a table without cloning the values of the input elements inside it?

Question

I am trying to add a row to a table. I found that we can use the clone() method to duplicate an existing row. My table has two text inputs in it in two different <tr> elements. Cloning the last row is also duplicating the values in my text inputs, which I don't want? How can I clone the row without duplicating the values?

Here's what I have so far:

$("#table-1 tr:last").clone();

Answer 1

Try this:

var clone = $("#table-1 tr:last").clone().find('input').val('').end();

• .clone() the last <tr>
• .find() the <input> elements in the clone
• set the .val() of the <input> elements to '',
• call .end() so that the cloned <tr> is stored in the variable instead of the <input> elements.

If you intend to append it to the table immediately, add .insertAfter("#table-1 tr:last") to the end.

var clone = $("#table-1 tr:last").clone().find('input').val('').end().insertAfter("#table-1 tr:last");

Answer 2

You can add this line after your given line to set the values of the input fields to blank:

$('#table-1 tr:last input').attr('value','');

or just:

$('#table-1 tr:last input').val('');