JQuery-can't删除表行

JQuery - can't delete table row

本文关键字：删除 JQuery-can      更新时间：2023-12-27

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

这是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);
});

我想用delete按钮或action_delete删除表中的tr（请参阅js代码）。我已经完全成为父母了。但我仍然无法删除tr.

试试这个，您可以使用.on将click handler挂接到运行时创建的delete button。尽管挂钩工作正常，但在处理创建为dynamically的elements时，使用.on是一种很好的做法。顺便说一句，你必须将#与+连接起来，而不是与.连接起来。这是你的代码的问题，请参阅你的代码。

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

演示

编辑：

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

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

您的remove方法不正确。应该是：

$("#" + get_tr_parent_id).remove();

它当前返回的是undefined，而不是连接这两个字符串。

相关文章：