can't fire click eventListener on font awesome icons in javascript-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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

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