如何在点击事件中添加和删除 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>

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>

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

Answer 3

据我了解，如果已添加标签 <i>，您需要将其删除。为此，请检查当前 class .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>

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

How can I append and remove a Font Awesome icon in a click event (Javascript)

html

javascript

css

font-awesome