DOM object cloner Javascript widget

Question

Can someone suggest me a widget that can take an existing DOM object (for example, a table row) and clone it / add it to the DOM after the existing source object, and also allow it to be deleted or to add others.

To better explain what I want, here is an example.

Suppose I have a table with one starting row (contains several empty fields). The widget will add a button on the side of the line, which will allow you to add a new line (by doubling the initial line with empty fields) or more, and also add a delete button next to the added lines to delete the cloned line, except for the original (first line).

I found a jQuery widget that does something like this like Multi Field Extender, but I have a number of problems with it in Internet Explorer that disables the widget. I tried to do this, but I did not find an alternative. Thank you in advance!

Answer 1

Assuming your html looks like this:

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

Your jQuery to add a new line could be:

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

Note: not complete, but the idea sounds.

Answer 2

Starting with something like this:

​<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="button" class="addRow" value="Add" /></td>
  </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

This jQuery will work for add / remove:

​$(​​​'table').delegate('​​​.addRow', 'click', function() {
  var r= $(this).closest('tr').clone(true);
  if(r.find('.removeRow').length === 0)
   r.append('<td><input type="button" class="removeRow" value="Remove" /></td>');
  r.insertAfter($(this).closest('tr'));
}).delegate('.removeRow', 'click', function() {
  $(this).closest('tr').remove();
});

. , , , , ( ..). Add, document.ready, :

$('table tr:first-child')
  .append('<td><input type="button" class="addRow" value="Add" /></td>');
​