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" });
    });
};

这是我将<li>附加到的

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

如何删除动态生成的列表项并替换为新的列表项

0 个答案: