JQuery - 使用静态链接删除动态创建的表答案

【问题标题】：JQuery - Removing Dynamically Created Table with Static LinkJQuery - 使用静态链接删除动态创建的表
【发布时间】：2023-03-02 21:59:01
【问题描述】：

我有一个页面，其中有两个链接 - 已注册和已完成。单击任一创建一个包含相关数据的表。单击按钮时，需要从页面中删除当前表，并创建新表（通过 Javascript）并附加。出于某种原因，.remove() 和 .empty() 无法处理动态创建的表。已注册和已完成链接始终存在于页面上。

HTML：

<body>
    <a id="completed" class="btn" title="Completed">Completed</a>
    <a id="enrolled" class="btn" title="Enrolled">Enrolled</a>
    <div id="table_container">
        <table id="courses_table"></table>
    </div>
</body>

Javascript：

$(document).ready(function() {
    $("a[class*=btn]").click(function(e) { 
        display_type = this.id; 

        getTags(display_type);

        e.preventDefault();
    }); 
});

function getTags(type) {
    $('#courses_table').remove();

    //ajax call to get data, create string of new table html, append it to the container div
    var table_data = '<table id="courses_table">...</table>';

    $('#table_container').append(table_data);
}

我尝试将.remove() 移动到点击事件或成功函数中，并删除整个包含的 div，但没有任何乐趣。附加没有问题。我敢肯定这是我想念的简单的东西。

编辑：#table_container.children() 的 console.log 是 [img images/calendars.png, div.width-100, table#courses_table]。

#courses_table 的 console.log 让我得到[table#courses_table]。如果我正确解释了这些结果，则该表存在，所以我回到为什么它没有被删除。

编辑第二个：我忘了提到我要删除的表有多个 tbody 标签。也许这会导致问题？我确实尝试在删除之前清空表，但它不起作用。

这是一个显示我所看到内容的小提琴：http://jsfiddle.net/c4Y3U/13/

【问题讨论】：

我注意到您的 HTML 中有错字：<table id="courses_table>（缺少结束引号）
啊，那是复制/粘贴失败。已更正，谢谢。
如果表是<div> 中唯一的东西，您可以使用.empty() 而不是.remove() - jsfiddle.net/CalvinAllen83/c4Y3U
保持表格不变，只替换内容怎么样？ jsfiddle.net/CalvinAllen83/c4Y3U/3
试试这个，将 getTags 函数设置为文档就绪函数内部：jsfiddle.net/CalvinAllen83/e94nK

标签： jquery dynamic html-table append

【解决方案1】：

而不是使用

id="courses_table"

使用

class="courses_table"

当然也要相应地更新 jQuery 选择器，参见 http://jsfiddle.net/c4Y3U/22/

【讨论】：