jquery - Adding a table cell into only cloned table -

jquery - Adding a table cell into only cloned table -

i want add together new td cloned table exist in cloned table not in original one. reason is, don't want users remove original table otherwise there won't cloned :)

currently this:

<table> <tr> <td> <div class="sizes">size</div> <div class="sizes">length</div> </td> </tr> </table>

after cloning should this:

<table> <tr> <td> <div class="sizes">size</div> <div class="sizes">length</div> </td> <td class="remove-table"><span>remove</span></td> </tr> </table>

js:

$(document).ready(function () { $('.add-another-table').click(function (event) { event.preventdefault(); var clonedtable = $(this).prev('table').clone(); $(this).before(clonedtable); }); $('div').on('click', '.remove-table', function (event) { event.preventdefault(); $(this).closest('table').remove(); }); });

http://jsfiddle.net/b3jdb/

try .append() required element on clone,

$(document).ready(function () { $('.add-another-table').click(function (event) { event.preventdefault(); var clonedtable = $(this).prev('table').clone(); $(this).before(clonedtable.find('.remove-table').remove().end().find('tr').append('<td class="remove-table"><span>remove</span></td>').end()); }); $('div').on('click', '.remove-table', function (event) { event.preventdefault(); $(this).closest('table').remove(); }); }); demo

jquery html