时间戳

首页 > 解决方案 > 事件更改后删除附加的先前数据

javascript - 事件更改后删除附加的先前数据

问题描述

我有很多代码，但我只会展示我目前坚持的部分。我要解决的是，当我将数据附加到表中并更改事件时，以前的数据也会附加到表中的新数据中。我知道有很多关于这个的文章，我在一些人建议使用的地方查找了它们detach()。但我不想稍后附加数据，所以这不适用于我。我也尝试使用remove()它并且它可以工作，但是在事件更改时，它会在数据最初加载之前立即删除数据。

我没有控制台错误，一切都包含在document.ready()函数中

我想要达到的目标：

在事件更改时，如果用户更改输入，则加载数据，从先前事件中删除先前数据并从当前事件中加载新数据。

这是我的代码：

var renameLocations;

switch(picker.chosenLabel){
  case "Example event1":
    renameLocations = [];

    dataLabel = <?php echo json_encode($locations) ?>;
    dataCount = <?php echo json_encode($count) ?>;

    var locationsPHP = <?php echo json_encode($locations) ?>;
    var countPHP = <?php echo json_encode($count) ?>;

    locationsPHP.forEach(function(item, i){
      //$('table#relevantdataModal').find('tbody').innerHTML = '';

      // This works but it deletes the data immediately on event change Rather than loading in data and deleting it later...

      $('table#relevantdataModal').find('tbody').remove();
      $('table#relevantdataModal').find('tbody').append('<tr><td>' + locationsPHP[i] + '</td><td>' + countPHP[i] + '</td></tr>');
    });
  break;
  
  case "Example event2":
    renameLocations = [];

    dataLabel = <?php echo json_encode($todaylocations) ?>;
    dataCount = <?php echo json_encode($todaycount) ?>;
  break;
} // End switch statement

标签： javascriptjquery

解决方案

除了 remove() 和 append() 之外，您可能还想为 vanilla JavaScript 尝试使用 innerHTML。在 jQuery 中，这也是通过 .html() 完成的。

在您的情况下，它将是： $('table#relevantdataModal').find('tbody').html(...add your stuff...)

这里有一些关于 vanilla JS 和 jQuery 的快速 W3 参考。

香草 JS - W3 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml

jQuery - W3 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_set

推荐阅读