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

Question

I'm trying to write JavaScript code that will apply a FA tick icon to a day when clicked if there isn't already a tick there, and remove the tick if there is one. I have written code that appends the icon but cannot figure out how to remove it

here's what I have

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

user_7461381 · Answer

You can check if the element i is already exists or not, if not exists then create the element and add the classes to the element. If present then remove the element.

You can try the following way:

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

user_8222817 · Answer

You can try to add the id to your icon & check for id to determine it exists or not.

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

user_13573444 · Answer

As I understand it, you need to remove tag if it has already been added. To do this, check for the presence of tag

in the current class .day:

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

If the tag exists, then delete it using the removeChild() method:

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

1 2 3 4 5 6 7 8 9 10

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

3 Answers