So there’s a lot going on in there, but it is by and large feasible. The only real part I’m not too familiar with would be handling the fadeOut, but I think the easiest way would be with a CSS animation.
let myEl = document.querySelectorAll("ul");
myEl.map(element => {
element.addEventListener("click", function(event){
if (event.target.matches("span") ){
// Not really sure how you'd handle the fadeOut, probably easiest with a CSS class
event.target.remove();
}
})
A few things to note. As @Praveen-coding said its better practice to use classes to trigger animations. So we can use classList.add for this. Also you do not need the <span> tag unless there’s is something specific it’s used for.
Its best to use classes when selecting elements. In the future you may add another UL to this page, this javascript would then cause strange behavior.
Ah, I get you. I assume for your test, the reason for selecting the span is that in the real thing that would be something like a close button? What @collinstommy says is definitely the best solution I think, mine fades the wrong thing (the list itself rather than the list item), and removes the span rather then the list item. Plus it’s often a lot easier to play around with the animation in CSS, and it’s generally much better for simple stuff like this.
If you want to do the animation in JS (maybe if you want something a bit fancier than just a fade), there are very good libraries available, much better the what is available in jQuery: Greensock is exceptional, and for an excellent lightweight replacement, AnimeJS is also superb.
My post was a response to the question DanCouper asked about the DOM structure.
OP only posted a piece of code, we don’t actually know the DOM structure (we can speculate). I was simply speculating about the structure based on the code in the OP. It wasn’t meant as a solution to anything. Also as the original code posted does use a span, we, or rather he, obviously do need it. And as pointed out, it is possible that the span is a container for something like a delete button.
Also, you can’t attach the event listener to the LI’s (at least not on first load), it is a todo list, the LI’s are not in the DOM until the todo item gets added. You have to attach it to the parent and do event delegation. It is also just best practice to not add event listeners to list items, there can end up being thousands of them for all we know.