OK we'll come back the next feature I want to tackle is the X button here.
So when we click on this X it should actually remove the entire To do so not just grayed out but it
should actually fade out and delete.
So it looks like this on the final version.
We don't have the same icon to click on in the same colors or the animation but the functionality when
I do click on something should be the same.
So let's say that I'm done with dishes.
It fades out and then disappears.
And it's no longer here it's completely gone.
OK.
The first thing that we want to do is listen for a click on any of these exes.
And in our age Tim I'll remember that we made each one a span so that we can easily do that.
Otherwise if we just had an X as part of the lie there's no way to determine if our click is on the
X or if it's on the rest of the way.
So we just been there and now we'll go to a javascript and let's add in another comment.
Click on X to delete to do so we'll start with the click event.
So dollar sign.
Select all spand And will you click again and then we need a callback function and instead of our callback
we'll just do another click on a span just like that and we'll go back refresh we click on the lie nothing
happens.
As soon as we click on the span we get an alert that says you clicked on this span.
There is one small issue that you may not have noticed yet when I click on the span and then click on
the X I get the alert that I expect to get but also pay close attention as I dismissed the alert.
We also get the styles that are coming from the click event.
So what that tells us is that the spam event is firing and then afterwards the ly click event is firing
as well.
And that does make sense because our spans are inside of the allies.
So when we click on a span when I click on this span for instance in the middle let's inspect it
I'm clicking on this span but that's Spanish also inside the ally.
So from another perspective I'm clicking on the lie.
But from another perspective I'm clicking on the well because all of these are instead of a UL or on
the div ID container or on the body or on the team element that one click on this span is going through
you know five or six different layers.
So when we add in event listener to the span or to the ally or if we had an event listener and all of
them which I'll show you right now.
So let's add another event listener here and this one will be on the will and we'll just alert clicked
on UIL and will do one more.
And this one will be on the divx ID container and this will say click on container div and actually
will do it on the body as well.
And this will say click on the body.
OK.
So we click on the span which is instead of an ally instead of a UL instead of the container inside
of the body.
Now let's pay attention when we refresh to the order that things fire in.
So first I click on the span and it tells me clicked on the span and then I don't know if you noticed
but the click event fire does well that's how we got the styles there.
And then the well click event then the container div and then the body finally.
So that example illustrates a phenomenon called event bubbling.
What happens is this event initially is triggered on the span and that's where it originates.
But then it bubbles up in two parent elements.
So it bubbles up into the lie and it will trigger any like click events and then from there it bubbles
up to the can to the well which will trigger any well click event and so on until it hits the HTL element
where it stops to prevent the lie.
Click handler from triggering when we click on the span which is inside the Y.
What we can do is actually tell the event inside of the span to not bubble anymore.
Just to stop in its tracks and not trigger any other events on parent element.
So I'll show you that here.
All we need to do instead of this span quick listener we add in the event object.
And again this can be called E event T.
Any name that you want the most common is event or e.
And then what we'll do is add in a method called event stop propagation.
And this is a J coding method that will stop the event from bubbling up.
So it will fire on the span but it won't continue onto the like listener or any of these that we have
for that matter.
So if we save and refresh.
And now I click on a span I still get my clicked on the span and then it stops.
We don't get any of those other listeners that we had set up firing another we have the span listener
set up correctly.
Let's fill it in with the correct code.
What we needed to do is when we click on a span I'll go back to the browser when we click on one of
these.
We want to remove this lie so the lie that contains it may refresh.
I click on this span it needs to remove this lie and to do that we can start from the span using dollar
sign this and if we just do dollars on this remove or fade out but we'll start with remove.
And we go back.
All that happens is that the span goes away.
We right now are removing the span.
We need to remove the enclosing element and Shakeri gives us a really nice and easy way to do that.
All we have to do is write this parents remove and that will actually give us the parent element as
a query element.
So this is a span that we clicked on parent gives us the lie remove will remove the entire ally.
So now if I refresh you can see it disappears and refresh again.
But if I click on the fly it just checks off the last improvement that we could make is rather than
removing it immediately.
It's faded out.
So we'll do a dot fade out and start there go back refresh we click and it fades out.
But remember just fitting it out doesn't actually remove it.
It's still here if we inspect instead of our you well we still have three to do is just two of them
have display none.
And we don't want that to happen.
Imagine that we had a thousand to lose that we had deleted.
Well we don't want to slow things down by having a thousand hidden elements on our page.
So what we'll do instead is use remove but remember it doesn't work just to do this.
It will remove it but it won't wait for the fade out to finish.
If we want to so quickly demonstrate that we click it starts to fade and then immediately after it removes
if we want the fade out to finish all we need to do is make use of the callback we can pass into fadeout
that will run afterwards.
And let's give it a duration as well let's say five hundred milliseconds to start.
And then when it's done we can't just call remove on its own.
We need to call it on an element and the element we want it to call it on is the same one that we're
filling out so we can use a dollar sign.
This is important to note that this right here is not the same dollar sign this right here.
So let's walk through that it's a little complicated when we click on a Spanish dollar sign.
This refers to the element that was quick on the span but then we're doing parent.
So now we're working with the lie that encloses that span and then we're doing fadeout on the fly.
So instead of fade out this refers to the lie not the span.
OK so we'll save and go back refresh.
Now we get a nice fade out and if we inspect the UL we only have one life left.
So it fades out and then removes.
To summarize everything here.
The first issue we ran into was that our events the click event on the span was actually firing the
event on the fly as well after it fired the span of it.
So to fix that we used event that stop propagation which stops it from bubbling up to other elements
.
And then we used that parent to retrieve the ally that is enclosing the span that was clicked on and
then we faded it out.
And then when the fade out is done we remove the entire lie in the next video we're going to tackle
the new to do functionality