如何在点击事件中添加和删除 Font Awesome 图标（Javascript）

Question

我正在尝试编写 JavaScript 代码，以便在单击某一天时应用 FA 勾号图标，如果没有勾号，则应用勾号，并且如果有的话则移除它。我已经编写了一个添加图标的代码，但是无法弄清如何删除它。

以下是我的代码：

HTML 和 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);
    });    
}

<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>

- Robin Bell

---

看一下toggleClass()，它会为您添加和删除类。 - need_to_know_now

好的，你知道我怎么选择事件目标的嵌套图标吗？ - Robin Bell

你能否在相关位置更新你的代码，以便我更好地理解你的问题？ - need_to_know_now

Answer 1

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

您可以尝试以下方法：

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>

- Mamun

Answer 2

你可以尝试给你的图标添加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);
    }
    
  })    
}

- Dhruv

Answer 3

据我理解，您需要移除已添加的标签<i>。为此，请检查当前类.day中是否存在标签<div>：

if (!this.getElementsByTagName("i").length > 0) { ... }

如果存在该标签，则使用 removeChild() 方法将其删除：

this.removeChild(this.getElementsByTagName("i")[0]);

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

<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>

- s.kuznetsov