как удалить динамически сгенерированный элемент списка и заменить его новым

Question

Когда загружается представление, я использую axios, чтобы извлечь некоторые данные с сервера и показать количество определенных наборов записей.Когда пользователь выполнит действие, это количество изменится, и я хочу снова обратиться к серверу, а затем показать обновленный счет.В настоящее время старое значение все еще видно, а затем под ним добавляется новое, что имеет смысл, поскольку именно это я и сказал сценарию.Я хотел бы удалить существующий элемент и заменить его новыми данными, но поскольку эти данные являются динамическими, я не могу получить к ним доступ, как если бы у меня был нормальный класс, например: document.querySelector('.given')

Это триггеры функциикогда страница загружается, и я вызываю ее снова, когда пользователь выполняет свое действие:

function getGivenCount() {

  axios.get('/account/givencount')
  .then(response => {
    document.querySelector('.counts').insertAdjacentHTML('afterbegin', response.data.html);
  })
  .catch(error => {
    document.querySelector('.counts').insertAdjacentHTML('afterbegin', '0');
  });
 }

Это код контроллера, где выполняется запрос базы данных:

exports.getGivenCountSide = (req, res, next) => {
  Product.countDocuments({ userId: req.user, status: "given" })
    .then(given => {
      if (given > 0) {
      const givenTotal =
        '<li class="given"><a href="/account/given">Given <span class="nav-tag blue">' +
        given +
        "</span></a></li>";
      res.status(200).json({ html: givenTotal });
      } else {
        res.status(200).json({ html: '' });
      }
    })
    .catch(err => {
      res.status(500).json({ message: "Something went wrong" });
    });
};

Это HTMLчто я добавляю <li> к

<ul class="counts">
</ul>