如何在一个div被点击时添加一个元素，但从其他div中删除相同的元素？

Question

我有一个在div被点击时添加元素的onclick函数。

function clickOnADivToCreateLi(element) {
  var div = $(element);
  var i = document.createElement("i");
  $(i).addClass("fas fa-check-circle clicked");
  div.append(i);
}

但当我点击另一个具有相同类的div时，我有两个具有相同的div <i> 如果我再点击一次，那个div就会有2个。<i>s

如何添加 <i> 但同时又将其从其他元素中移除？

Answer 1

选择 i 元素，并调用与您分配给它的类相匹配的 remove() 然后再创建新的实例。

同时注意，你的代码可以变得更加简洁。

function clickOnADivToCreateLi(element) {
  $('i.fas.fa-check-circle.clicked').remove();
  $(element).append('<i class="fas fa-check-circle clicked" />');
}