Слушатели событий, JavaScript - PullRequest
Новая
       20

Слушатели событий, JavaScript

2 голосов
/ 09 марта 2020

Как сделать так, чтобы новый контент отображался в моей 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 разных категориях, я хочу, чтобы при нажатии на категорию отображалась только одну таблицу и удалите другую, щелкнув ранее.

1 Ответ

1 голос
/ 09 марта 2020

В этой строке:
document.querySelector(".deposit-container").appendChild(table);

попробуйте заменить appendChild на innerHTML. Добавить будет просто продолжать добавлять элемент вместо его замены.

Исправленная строка:
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);

Дайте мне знать, если это поможет ...

...