Удалить <tr> s, который я добавил к <tbody>

Я создаю страницу, которая в основном сохраняет закладки веб-сайтов. Это очень просто, но я пытаюсь это сделать:Удалить <tr> s, который я добавил к <tbody>

Нагрузка на страницу вызывает функцию, называемую loadPages(). Функция отправляет бэкэнд запроса ajax и извлекает массив json_encoded веб-сайтов с заголовком &.

Когда я вызываю функцию loadPages(), в начале этого я хочу, чтобы удалить все ранее приложенные <tr> S от <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();

Я признателен за любую помощь, спасибо.

источник

2016-07-22 Chris Evans

"Любые ранее добавленные закладки". Я бы сразу предложил использовать 'data()' для этого. Я не заканчиваю чтение и пытается отлаживать, кстати. –

Использование '$ (" # pagesTable> tbody tr "). Remove();' работает для меня, как вы можете видеть здесь: https://jsfiddle.net/8mrLssvq/. – nnnnnn

Вы попробовали '$ (" # pagesTable> tbody "). Remove (" tr ");'? – ochi

Внутри блока успеха вашего AJAX запроса используйте следующий код перед добавлением:

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

Не забудьте upvote, если вы найдете это полезным !!

источник

2016-07-22 06:12:15

Я такой идиот, чтобы не попробовать этого, но я смущен, почему это работает, и '$ (" # pagesTable> tbody tr "). Remove();' does not. Ах, хорошо, теперь я не буду жаловаться, что это работает, спасибо! –

Я думаю, что решение должно быть

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>' 
       ); 
      }) 
     } 
    }); 
}

источник

2016-07-22 06:16:16

$("#pagesTable>tbody").html("") будет работать, попробуйте добавить его в начале успеха обратного вызова в Ajax запроса.

источник

2016-07-22 06:28:58

Удалить <tr> s, который я добавил к <tbody>

ответ

Смежные вопросы