我有一个页面,其中有两个链接 - 已注册和已完成。单击任一创建一个包含相关数据的表。单击按钮时,需要从页面中删除当前表,并创建新表(通过 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,但没有任何乐趣。附加没有问题。我敢肯定这是我想念的简单的东西。
编辑:console.log#table_container.children()
是[img images/calendars.png, div.width-100, table#courses_table]
.
一个 console.log#courses_table
得到我[table#courses_table]
。如果我正确解释了这些结果,则该表存在,所以我回到为什么它没有被删除。
编辑第二个:我忘了提到我要删除的表有多个 tbody 标签。也许这会导致问题?我确实尝试在删除它之前清空桌子,但它没有用。
这是一个显示我所看到的小提琴:http: //jsfiddle.net/c4Y3U/13/