I tried to append a table row to a table by clicking on a button. And inside the table, I put a link so i can click that and remove the row. I was using jquery.flydom plugin, by the way. The HTML looks like: ============HTML============== <table id="PE_Template"> <tr> <th><a class="removeRow" href="#"><img src="images/12-em- cross.png" alt="Delete this row" /></a></th> <td><input type="text" name="label" id="label0" value="" /></td> <td><input type="text" name="weightage" id="weightage0" value="" / ></td> <td><textarea name="description" id="description0>" cols="30" rows="2"></textarea></td> </tr> </table> <input type="button" class="add-row" /> ===============================
==============JS=============== $(document).ready(function(){ $(".removeRow").click(function(){ $(this).parents('tr').remove(); return false; }); $(".add-row").click(function(){ $("#PE_Template tbody").createAppend( 'tr',{},[ 'th',{},[ 'a',{className: 'removeRow', href: '#'},[ 'img',{name: 'Delete this row', src: 'images/12-em-cross.png', alt: 'Delete this row'},[], ], ], 'td',{},[ 'input',{type: 'text', name:'label'},[], ], 'td',{},[ 'input',{type: 'text', name:'weightage'},[], ], 'td',{},[ 'textarea',{name:'description', cols:'30', rows:'2'},[], ], ] ); return false; }); }); =============================== I also tried to append the table row with the non-flydom code: ==============JS=============== $("#PE_Template tbody").append([ "<tr>", "<th>","<a class='removeRow' href='#'><img name='' src='images/ 12-em-cross.png' alt='Delete this row' /></a>","</th>", "<td><input type='text' name='label' value='' /></td>", "<td><input type='text' name='weightage' value='' /></td>", "<td><textarea name='description' cols='30' rows='2'></ textarea></td>", "</tr>" ].join("")); =============================== But the result is that the rows generated by the JS cannot be removed. Can someone help me solve the problem? Thanks! C1412