Как очистить результат запроса на сервер?

Question

[Johnny_Hill]

Есть данные полученные с сервера через fetch. При получении новых данных, старые данные не очищаются, а остаются и накапливаются с новыми. Как сделать, чтобы при получении новых данных старые данные очищались (очищался HTML).

'use strict';

const LOGIN_URL = 'https://api.github.com/users/{{login}}';
const button = document.querySelector('#button');
const input = document.querySelector('#input');
const wrap = document.querySelector('.wrap');
let list = document.querySelector('#list').innerHTML;

button.addEventListener('click', onButtonClick);

function onButtonClick(event) {
  event.preventDefault();
  fetch(LOGIN_URL.replace('{{login}}', input.value))
    .then((response) => {
      clearInput();
      return response.json();
    })
    .then((data) => {
      renderUser(data);
      removeHtml ();
    })
    .catch((error) => console.error(error));
}

function renderUser(data) {
  const dataHtml = generateDataHtml(data);
  wrap.insertAdjacentHTML("afterbegin", dataHtml);
}

function generateDataHtml(data) {
  return  list
    .replace('{{data.avatar_url}}', data.avatar_url)
    .replace('{{data.public_repos}}', data.public_repos)
    .replace('{{data.followers}}', data.followers)
    .replace('{{data.following}}', data.following);
}

function clearInput() {
  input.value = '';
}

function removeHtml () {
    list = '';
}

<div class="wrap">
  <input id="input" type="text" placeholder="Enter login...">
  <button id="button" type="submit">Search</button>
</div>

<script type="text/template" id = "list">
  <ul class = "list">
    <li class = "list-item">Avatar:
      <img src = "{{data.avatar_url}}" alt="avatar">
    </li>
    <li class = "list-item">Public repositories: {{data.public_repos}}</li>
    <li class = "list-item">Followers: {{data.followers}}</li>
    <li class = "list-item">Following: {{data.following}}</li>
  </ul>
</script>

Answer 1

[MamaLuyba]

ну так как бэ написано же

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы

соответственно, нужно очищать содержание блока, выводящего информацию. т.е. wrap.innerHtml = '';