How to add the delete button to a newly appended table row present in clone() method in jQuery?

Question

I'm appending a new row to the HTML table on click of Add button. The jsFiddle link is as follows: http://jsfiddle.net/fgLHN/3/

The above code is working really well for me. But I'm not able to add the delete button with each newly added row. I tried below code but it didn't work. Threw an error in console.

$(document).ready(function () {
  $('.btnAdd').click(function () {
    var new_row = $('#reb1').clone()+'<button style="margin: -26px -14px;float: right; color:#C00; opacity: 2;" type="button" class="close" onclick="deleteRow(this)" data-dismiss="alert" aria-hidden="true">&times;</button>';
    var tbody = $('tbody', '#blacklistgrid');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + n);
    $(':input', new_row).not('.prod_list').remove();
      tbody.append(new_row);
   });
});

I want to add this button code in a <td> of a newly added <tr> where the "Product Select Control" is present(i.e after code tag but before of first column of newly added row). How should I achieve this? Can some one please provide me a way to achieve this? If you have any other logic than using clone() method, it'll be fine. No issues. Thanks in advance. If you need any further information please let me know.

Answer 1

If you want to 'append' the button right after the select tag, this is what you should try to do.

$('<button>Delete row</button>').appendTo( $(new_row.find('td:first')) );

Add this piece of code right before

tbody.append(new_row);

and you should be able to see the button right bellow the select tag. The logic is quite simple - You're telling jQuery to find the very first cell of the newly created row, and append a button right at the end of it. And since we have a select box there, the button will appear right after it. The code is very simple, so it should be a good start for you.

Answer 2

You can do this before appending the new row

new_row.find("td:eq(1)").html(
  '<button style="color:#C00; opacity: 2;" type="button" class="close" onclick="deleteRow(this)" data-dismiss="alert" aria-hidden="true">&times;</button>'
);

UPDATED FIDDLE