AndikaK AndikaK - 1 month ago 14
Javascript Question

JQuery - can't delete table row

I don't know what is an error in this code. I have correctly detect parent. But doesn't work.

This is HTML code

<table>

<tbody class="tbody">
<tr id="row_1">
<td>
<input type="text" id="row_1_jumlah_1" name="row_1_jumlah_1" value="1" readonly="readonly" class="form-control" />
</td>
<td></td>
</tr>
<input type="button" class="btn green" value="Tambah Satuan" id="add_row" style="margin-bottom: 10px; margin-left:10px;" />
</tbody>

</table>


This is js code

$("#add_row").click(function () {
var last_index_tr = $(".tbody tr").length;
var new_index_tr = $(".tbody tr").length + 1;
var row = $("<tr id='row_" + new_index_tr + "'>");
var input = $("<td> <input class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1' readonly='readonly' /> </td>");
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");

action_delete.click(function () {
var parent_1 = action_delete.parent();

var get_tr_parent_id = $(parent_1).attr('id');
//document.write(get_tr_parent_id);
$("#".get_tr_parent_id).remove();
});


row.append(input);
row.append(action_delete);
row.append("</tr>");
$(".tbody").append(row);
});


I want to remove tr inside table with delete button or action_delete(see js code). I have get parent perfectly. But I can't still delete tr.

Answer

Try this, You can use .on to hook the click handler for that delete button which is being created at runtime. Though your hooking is working, Using .on is a good practice while dealing with elements which are created dynamically. And by the way you have to concatenate the # with + Not with . That was the problem with your code, See your code working over here.

var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr   +"_delete' class='delete' value='delete' /> </td>"); 

$(document).on('click',"#row_" + new_index_tr +"_delete",function(){
       $(this).closest('tr').remove();
});

DEMO


Edit:

Try the following code, This will register to the click event commonly only once for your entire delete buttons.

$("#add_row").click(function () {
    var last_index_tr = $(".tbody tr").length;
    var new_index_tr = $(".tbody tr").length + 1;
    var row = $("<tr id='row_" + new_index_tr + "'>");
    var input = $("<td>     <input  class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1'  readonly='readonly' /> </td>");
    var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");  

    row.append(input);
    row.append(action_delete);
    row.append("</tr>");
    $(".tbody").append(row);
});

$(document).on('click', "input[type='button'][id$='delete']",function(){
       $(this).closest('tr').remove();
});

DEMO - I