javascript - 事件监听器，JavaScript

每次单击导航链接并删除旧链接时，如何在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个不同的类别，我想在单击一个类别时仅显示一个表并删除之前单击的另一个表。

最佳答案

在这行上：
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);

让我知道这是否有帮助...