事件监听器，JavaScript

Question

每次单击导航链接并删除旧链接时，如何在 DOM 中显示新内容。我点击的时候是一个接一个的获取内容，我想删除旧的，显示我点击的那个等等。 我正在使用数据库中的数组。 这是代码：

$(dataItems).on('click', 'li a', function (event) {
  event.preventDefault();
  let id = $(this).attr('data-code'); // sort them by their data-code

  const childrenItems = []; // push the sorted array items from db to this array
  for (let i = 0; i < Assortments.length; i++) { // This is the array from DB
    if (Assortments[i].AssortimentParentID == id) {
      childrenItems.push(Assortments[i].Name);
    }
  }

  //draw html table
  let perrow = 3, // 3 items per row
       count = 0, // flag for current cell
       table = document.createElement("table"),
       row = table.insertRow();

  for (let i of childrenItems) {
    let cell = row.insertCell();
    cell.innerHTML = i;

    count++;
    if (count%perrow == 0) {
      row = table.insertRow();
    }
  }
  document.querySelector(".deposit-container").appendChild(table);


})

prnt.sc/rdnavd - 这是它的样子，你可以看到有 2 个表格，我点击了 2 个不同的类别，我希望在点击一个类别时只显示一个表格并删除之前点击的另一个。

Answer 1

在这条线上：
document.querySelector(".deposit-container").appendChild(table);

尝试将appendChild 替换为innerHTML。 Append 将继续添加元素而不是替换它。

修改后的线路：
document.querySelector(".deposit-container").innerHTML = table;

编辑：

如果上述方法不起作用。尝试重置子节点。

将document.querySelector(".deposit-container").appendChild(table); 替换为以下内容：

let parent = document.querySelector(".deposit-container");

while(parent.firstChild){
  parent.removeChild(parent.firstChild);
}

parent.appendChild(table);

如果这有帮助，请告诉我...