javascript - JQuery - 无法删除表行

Question

我不知道这段代码有什么错误。我已经正确检测到 parent 。但不起作用。

这是 HTML 代码

<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>

这是js代码

$("#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);
});

我想使用删除按钮或action_delete删除表内的tr(参见js代码)。我已经完美地得到了 parent 。但我仍然无法删除 tr.

Answer 1

试试这个，您可以使用.on来 Hook 在运行时创建的删除按钮的点击处理程序。尽管您的 Hook 正在工作，但在处理动态创建的元素时，使用.on是一个很好的做法。顺便说一句，您必须将 # 与 + 连接起来，而不是与 连接。 这是您的代码的问题，请参阅您的代码在 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

---

编辑:

尝试以下代码，这通常只会为整个删除按钮注册一次单击事件。

$("#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