无法在 javascript 中的字体真棒图标上触发单击事件侦听器

Question

I have been trying to make a simple todo list in which i have added font awesome icons in front of every list item, but when i click on that icon it doesn't gets removed from the list.... Here's my js code:

   const list = document.querySelector('.list');

   list.addEventListener('click', e => {
    if (e.target.className === fa-solid') {
        let li = e.target.parentNode;
        li.parentNode.removeChild(li);
    }
})

here fa-solid is the class of the font awesome icon and when i click on this icon my code doesn't run.

Answer 1

I got the solution for my question. The only thing that was wrong in my code was the name of the class of font awesome icon. We have to pass the entire class name in the code and not just fa-solid .

const list = document.querySelector('.list');

list.addEventListener('click', e => {
    if (e.target.className === 'fa-solid fa-trash-can') {
        let li = e.target.parentNode;
        li.parentNode.removeChild(li);
    }
})

That's it.

Answer 2

you messing ' in the if statement 'fa-solid'

 const list = document.querySelector('.list'); list.addEventListener('click', e => { if (e.target.className === 'fa-solid') { let li = e.target.parentNode; li.parentNode.removeChild(li); } })

Answer 3

There is a quote missing in front of fa-solid inside the if

if (e.target.className === 'fa-solid')