Сортировать данные в JavaScript

Question

У меня есть проблема - я показываю в моем HTML data из JavaScript, и я должен отсортировать его после нажатия. Вот мой код:

const data = [
  {
    "id": 2,
    "title": "ASD",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  },
  {
    "id": 1,
    "title": "FGH",
    "src": "https://cloudfour.com/examples/img-currentsrc/images/kitten-small.png"
  }
]
const info_container = document.querySelector('.info-container')

const sort = () => {
  data.sort((a, b) => parseFloat(a.id) - parseFloat(b.id))

  fetchData()
}

const fetchData = () => {
  data.forEach((item, index) => {
  const img = document.createElement("img");
  const title = document.createElement('h3')

  const node = document.createTextNode(item.src);
  const node_title = document.createTextNode(item.title)

  title.appendChild(node_title)
  img.src = item.src

  info_container.appendChild(title)
  info_container.appendChild(img);

})
}
window.onload = function() {
  fetchData()
}

HTML:

<div><button onclick="sort()">sort</button></div>
  <div class="info-container">    
</div>

Плункер: http://plnkr.co/edit/Yjn4jaLN45pYJHFZBZLn?p=preview

Вместо того, чтобы обновлять мой фактический вид, создается новый, как это исправить?

Спасибо за ответы заранее!

Answer 1

Вам необходимо сбрасывать содержимое info_container каждый раз, когда вызывается fetchData:

const fetchData = () => {
  info_container.innerHTML = "";
  //Rest of the code
}

Модифицированный плункер

Answer 2

1. Странно, что вы не отпускаете увеличение числа детей info_container при каждом событии клика. Вы хотите заменить ваш контент info_container новым, так что ваша новая структура контента на первый взгляд не имеет значения, вы должны написать функцию, которая выполняет эту работу, проверяя, что вы можете хотя бы заменить строку новой. , С ответом @jack Bashford у вас есть решение

2. Вторая формулировка может помочь в коде, просто незначительное замечание, ваша fetchData вообще ничего не получает