Удаление div на основе идентификатора, не существующего в ответе jQuery AJAX

Question

Я получаю строки содержимого через jQuery AJAX, а затем заполняю таблицу новым содержимым по мере его добавления. Проблема в том, что некоторое содержимое может быть удалено из базы данных, и в этом случае я также хочу, чтобы оно было удалено из таблицы в режиме реального времени.

Я подозреваю, что мне нужно перебрать идентификаторы div таблицы и удалить любые идентификаторы, которых нет в ответе AJAX, но я не уверен, как сравнить их с ответом на данные, а затем удалить их:

function startRecords() {
  $.ajax({
    url: URL,
    dataType: 'json',
    success: function(data) {
      var res = data;

      for (var i = 0, len = res.length; i < len; i++) {
        if ($("#records-row-" + res[i].id).length == 0) {
          $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
        }
      }

      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    },
    cache: false
  }).fail(function(jqXHR, textStatus, error) {
    var delay = 3000;
    setTimeout(function() {
      startRecords();
    }, delay);
  });
}

Любые рекомендации о том, как этого добиться?

Answer 1

Используйте empty(), чтобы очистить записи, прежде чем добавлять новые.

function startRecords() {
  $.ajax({
    url: URL,
    dataType: 'json',
    success: function(res) {
      $("#records-content tbody").empty();

      for (var i = 0, len = res.length; i < len; i++) {
        if ($("#records-row-" + res[i].id).length == 0) {
          $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
        }
      }

      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    },
    cache: false
  }).fail(function(jqXHR, textStatus, error) {
    var delay = 3000;
    setTimeout(function() {
      startRecords();
    }, delay);
  });
}

Answer 2

Чтобы удалить элементы, которых нет в ответе с сервера.

Добавьте следующее сразу после success: function(res) {

var currentRows = $("[id^=records-row-]").toArray()
var currentRowsId = currentRows.map(function(row) { return row.id })
var resRows = res.map(function(row) { return "records-row-" + row.id })
var removeRows = currentRowsId.filter(function(rowId) { return resRows.indexOf(rowId) === -1 })
removeRows.forEach(function(rowId) { $("#" + rowId).remove() })

чтобы это выглядело так

function startRecords() {
    $.ajax({
      url: URL,
      dataType: 'json',
      success: function(res) {
        var currentRows = $("[id^=records-row-]").toArray()
        var currentRowsId = currentRows.map(function(row) { return row.id })
        var resRows = res.map(function(row) { return "records-row-" + row.id })
        var removeRows = currentRowsId.filter(function(rowId) { return resRows.indexOf(rowId) === -1 })
        removeRows.forEach(function(rowId) { $("#" + rowId).remove() })

        for (var i = 0, len = res.length; i < len; i++) {
          if ($("#records-row-" + res[i].id).length == 0) {
            $("#records-content tbody").prepend('<tr class="table-wrapper" id="records-row-' + res[i].id + '"><td class"" style="">' + res[i].content_1 + '</td><td class"" style="">' + res[i].content_2 + '</td></tr>');
          }
        }

        var delay = 3000;
        setTimeout(function() {
          startRecords();
        }, delay);
      },
      cache: false
    }).fail(function(jqXHR, textStatus, error) {
      var delay = 3000;
      setTimeout(function() {
        startRecords();
      }, delay);
    });
  }

С комментариями

var currentRows = $("[id^=records-row-]").toArray() // get rows with id starting with "records-row-"
var currentRowsId = currentRows.map(function(row) { return row.id }) // extract ids from rows
var resRowsId = res.map(function(row) { return "records-row-" + row.id }) // extract ids from response that will be added to DOM
var removeRows = currentRowsId.filter(function(rowId) { return resRowsId.indexOf(rowId) === -1 }) // remove every element that is added to DOM and in response from server
removeRows.forEach(function(rowId) { $("#" + rowId).remove() }) // remove elements that are not in response and is added to DOM

Альтернативное решение

$("#records-content tbody").empty(); для удаления каждого элемента каждый раз, когда клиент получает новые данные с сервера.

Answer 3

вы добавляете div к "records-content" без предварительной очистки. вам нужно добавить

$("#records-content tbody").html('')

перед началом цикла for. таким образом, только текущие данные в вашей таблице базы данных будут заполняться в таблице.