如何在单击事件中追加和删除字体图标（Javascript）

Question

我正在尝试编写JavaScript代码，它将应用一个FA刻度图标到一个点击的日子，如果那里还没有刻度，如果有刻度，则删除该刻度。我已经编写了附加图标的代码，但无法确定如何删除它

这是我的

HTML

<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>

JS

const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
    days[i].addEventListener('click', function(e){
        const tick = document.createElement('i');
        tick.classList = 'fas fa-check-square fa-4x'
        this.append(tick);
    });    
}

Answer 1

您可以尝试将id添加到图标中&检查id以确定它是否存在。

const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
  days[i].addEventListener('click', function(e){
    const check_square_icon = `check-square-icon-${i}`
    if(document.contains(document.getElementById(check_square_icon))) {
        document.getElementById(check_square_icon).remove();
    } else {
      const tick = document.createElement('i');
      tick.id = `check-square-icon-${i}`
      tick.classList = 'fas fa-check-square fa-4x'
      this.append(tick);
    }
    
  })    
}

Answer 2

您可以检查元素i是否已经存在，如果不存在，则创建元素并将类添加到元素中。如果存在，则移除该元素。

您可以尝试以下方式：

null

const days = document.getElementsByClassName('day')
for (let i = 0; i < days.length; i++) {
    days[i].addEventListener('click', function(e){        
        if(!this.querySelectorAll('i').length){ // check if i is not exist
          const tick = document.createElement('i');
          this.append(tick);
          tick.classList.add('fas', 'fa-check-square', 'fa-4x'); // add classes
        }
        else{
          var elem = this.querySelector('i');
          elem.parentNode.removeChild(elem); // remove i
        }
        
    })    
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>