Question

我使用以下代码模拟表：

<div id="edit_table">
    <div class="table_row">
        <div class="table_cell">
            <input type="text" id="Dt_of_Birth">
        </div>
        <div class="table_cell">
            <input type="text" id="F_Name">
        </div>
        <div class="table_cell">
            <input type="text" id="L_Name">
        </div>
        <div class="table_cell">
            <button id="del_row">Delete Row</button>
        </div>
    </div>
</div>
<button id="add_row">Add Row</button>

并使用

动态添加此表中的行

$('#add_row').on('click', function() {
    $('.table_row:last').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button id="del_row">Delete Row</button> </div></div>');
});

当我尝试删除行时，单击行中的删除按钮，它的行为不正常。如果下方有行，请点击“删除”按钮。按钮，所有这些行向下都被删除。如何停止此操作并仅删除我单击按钮的那一行。

我删除特定行的代码是：

$(document).on('click', '#del_row', function() {
    alert('Delete button clicked ....');
    $(this).parent().parent('div .table_row').remove();
});

当然无效。

请帮助我使用正确的jQuery逻辑删除特定行

提前感谢您的帮助......

Answer 1

您应该将.table_row添加到#add_row而不是.table_row:last，#del_row点击事件应该如下所示。

$('#add_row').on('click', function () {
     $('#edit_table').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button id="del_row">Delete Row</button> </div></div>');
});

$(document).on('click', '#del_row', function () {            
    $(this).closest('.table_row').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="edit_table">
    <div class="table_row">
        <div class="table_cell"><input type="text" id="Dt_of_Birth"></div>
        <div class="table_cell"><input type="text" id="F_Name"></div>
        <div class="table_cell"><input type="text" id="L_Name"></div>
        <div class="table_cell"><button id="del_row">Delete Row</button> </div>
    </div>
</div>
<button id="add_row">Add Row</button>

希望这能解决您的问题。

Answer 2

添加行时，会在删除按钮下方创建一行吗？也许如果你把删除按钮放在div.table_row之外就行了。

Answer 3

试试这个。我更改了以下内容：

将#del_row更改为.del_row，因为ids必须是唯一的
将添加处理程序更改为追加到容器而不是最后一行
更改了删除处理程序中的父选择器

＆＃13;

$(function(){
    $('#add_row').on('click', function(){
        $('#edit_table').append('<div class="table_row"><div class="table_cell"><input type="text" id="Dt_of_Birth"></div><div class="table_cell"><input type="text" id="F_Name"></div><div class="table_cell"><input type="text" id="L_Name"></div><div class="table_cell"><button class="del_row">Delete Row</button> </div></div>');
    });

    $(document).on('click', '.del_row', function() {
        alert('Delete button clicked ....');
        $(this).parents('div .table_row').remove();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="edit_table">

</div>

<button id="add_row">Add Row</button>

＆＃13;

使用子元素删除动态添加的div

3 个答案: