jquery - 使用JQuery动态插入和删除HTML标签的正确方法

Question

我不是网络专家，但我需要有关使用 JQuery 的良好实践的帮助。

我的问题:我有一张很大的 table 。每个元素都有一个按钮将其添加到页面的其他部分，因此我需要提取内容并将其设置到一个新元素中。

我写了this code on JSFiddle ，但我不确定这是解决这个问题的正确方法(但它有效)。

我想到的另一个选项是有一个 id ，其中包含我想要复制的行号并处理文本以通过例如获取值。 $('姓名-'+id).这应该如下所示:

<tr id='row-1'>
    <td id='name-1' class='name'>First</td>
    <td id='lastname-1' class='lastname'>Brand</td>
    <td>
        <button id='btnTest-1' class='btnTest'>Add</button>
    </td>
</tr>

感谢您的意见或建议!

Answer 1

切勿使用增量 id 或 class 属性。这变成了一场维护噩梦。

您可以使用 closest() 和 find() 而不是链式 parent() 和 children() 分别调用。此外，您还可以对动态添加的按钮使用委托(delegate)事件。试试这个:

$(document).ready(function () {
    $('.btnTest').click(function (e) {
        e.preventDefault();
        var $tr = $(this).closest('tr');
        var name = $tr.find('.name').text();
        var lastname = $tr.find('.lastname').text();
        $('#names').append('<div><span>' + name + ' ' + lastname + '</span><button class="delName">Delete name</button></div>');
    });

    $('#names').on('click', '.delName', function (e) {
        e.preventDefault();
        $(this).closest('div').remove();
    });
});

Example fiddle