Question

我正在创建一个基本上可以保存网站书签的页面。这是非常基本的，但我想要实现的是：

在页面加载时，它调用一个名为loadPages()的函数。该函数发送一个ajax请求后端并检索一个json_encoded网站数组，其中包含url＆amp;标题。

当我调用loadPages()函数时，我想从<tr>删除之前添加的任何<tbody>，但我尝试过的任何内容都没有实际工作，我就是丢失。我花了最后20分钟左右的时间浏览SO和google以获得答案，但没有一个解决方案适合我。

最终，我的想法是让我能够不止一次调用此函数，并且每次都只是覆盖表格的内容。

这是我的代码：

HTML

    <table class="table table-striped" id="pagesTable">
        <thead>
            <tr>
                <th class="col-sm-10">Page Name</th>
                <th class="col-sm-2"></th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

Jquery的

function loadPages(){

    // Code to remove the previously appended <tr>s from the <tbody> should be here

    $.ajax({
        url: "index.php?page=getAllPages",
        type: "GET",
        dataType: "json",
        success: function(ret){
            $.each(ret, function(){
                $('#pagesTable > tbody').append(
                    '<tr><td class="col-sm-10"><a href="' + this.url + '">' + this.title + '</a></td>'
                    + '<td class="col-sm-2"><button class="btn btn-danger" data-type="remove" data-id="' + this.id + '">Remove</button></td></tr>'
                );
            })
        }
    });
}

我尝试过的事情：

$("#pagesTable > tbody").children().remove();

$("#pagesTable > tbody tr").remove();

$("#pagesTable > tbody").empty();

$("#pagesTable > tbody").html("");

将类分配给tbody和tr，并对类名执行.remove()，如下所示：$(".class").remove();

感谢任何帮助，谢谢。

Answer 1

在ajax查询的成功块中，在追加之前使用以下代码：

$("#pagesTable tbody tr").remove();

如果你觉得这很有用，别忘了upvote !!

Answer 2

我认为解决方案应该是

function loadPages(){

    // Code to remove the previously appended <tr>s from the <tbody> should be here

    $.ajax({
        url: "index.php?page=getAllPages",
        type: "GET",
        dataType: "json",
        success: function(ret){
            $('#pagesTable > tbody').html("");
            $.each(ret, function(){
                $('#pagesTable > tbody').append(
                    '<tr><td class="col-sm-10"><a href="' + this.url + '">' + this.title + '</a></td>'
                    + '<td class="col-sm-2"><button class="btn btn-danger" data-type="remove" data-id="' + this.id + '">Remove</button></td></tr>'
                );
            })
        }
    });
}

Answer 3

$("#pagesTable>tbody").html("")将起作用，尝试在ajax请求中成功回调的开始时添加它。

删除我附加到的a

3 个答案: