DOM object cloner Javascript widget

Question

Could somebody suggest me a widget that can take an existing DOM object (like a table row) and clone it/add it to DOM after the existing original object and also allow to remove it or add others.

To explain myself better about what I want here is an example.

Lets say I have a table with one initial row (contains a number of empty fields). The widget would add a button on the side of the row which would allow to add a new row (by doubling the initial row with empty fields) or more and also it would add a remove button beside the added rows for the removal of the cloned rows except the original one (the first row).

I found a jQuery widget that does something like this called Multi Field Extender, but I have a number of issues with it on Internet Explorer that disables the widget. I tried to google it but I didn't find any alternative to it. Thank you in advance!

Answer 1

Assuming your html is like this:

<tr>
  <td>
    <input type = "submit" class = "grow" value = "Add another row" />
  </td>
</tr>

Your jQuery to add a new row could be:

$("input.grow").live('click',function(){
  var $row = $(this).closest('tr');
  $row.clone(true).insertAfter($row);
});

Note: Untested, but the idea's sound.