Welcome, everyone, in this lecture.
We're going to learn about how to prevent even bubbling when we tried to delete an item, how we can
use the I.D. that we just inserted in our HTML, you will see what I'm trying to say in just a second
and how we can use the Perrineau.
So these three things, we're going to do it.
I'm just going to write it down and and I'm going to delete it after each and every lecture.
Probably that is the best idea now, but prevent the event bubbling.
Remember, we even delegation, we're going to use something like that.
We will use unique.
Ideas from our
HTML.
What else, these DP's are going to come and we're just going to show you we're going to come from this
board, right?
These are these I'm talking about these ideas in unique.
Ideas from our HTML Food and exercise panel.
OK, now what else are we going to do is we can use Barend.
Note, I'm just going to leave this note down manipulation or traversing so that what we're going to
do so I'm just going to close this bar and I'm just going to add something here.
So you will be you will be exactly sure what we are doing.
So I'm going to add food one like five hundred or that.
So when I click here, I do have these a button, so if I inspect it, it will be this button.
So when I click hour RFA time circle or that will be the delete button.
Right.
That is just the icon.
I want this to be done at the moment.
It's not working.
Right.
I'm just selecting it there.
Nothing else.
So I want this to be gone.
And also here it is.
I'm talking about these IDs.
So if I add another one, I don't know, say ice cream.
And if I add that one, so if I go here, I will have the ice cream, if I inspect it, I would like
to see idea of one.
Remember those ideas we created back a couple of lectures.
And now what we are going to do is first we need to create event listener in the event listener should
be on this button.
When we create this point, actually, we're going to click it's it's AI class and we do have the same
eyeglass, same same button.
It's here, right?
Even in the food or exercise slider.
So we remember that when we do want to prevent event bubbling to prevent to go and traverse through
the DOM, we would like to put the event delegation on the spirit.
No, if I put this bit in the lead item here when I click this one, if I want to find it Spearin,
I'm going to find it here.
Right, this exercise slider.
So that is the parent for this button, but for this button.
Right.
For the food.
The slider is has a different name.
So I will need to use two separate.
I will need to use two separate event listeners.
And I'm not going to do that.
I'm just going to find for these both for these buttons or for these one slider exercise and food slider.
I just want to find which is the most common parent.
So I'm going to go up.
This is not the parent.
Right, because he felt this was the parent.
This closing this will not be here.
This is not the parent.
Right.
This is closed for the main panel result.
These is closed by the main panel graph.
Now, this day, it's closed here in the last one is main panel or main container.
Whatever we want, we can use.
I know that the parent of those panels or these two panels for the food and for the exercise will be
this main panel or where it is or main container.
So whatever you want to use now before doing anything, I'm just going to put in our last names.
Right.
And I'm going to put it here.
I'm going to say main main panel and I'm going to use the main what was just like that main panel.
That's pretty much it.
So now I do have in our e-mail CSS class names, private object.
I do have that one so I can use it.
OK, now remember where we fire up these events, listeners.
So we have the function called group event listeners in.
The most logical here is to call these mean to put the event listener for that button when we clicked
with the here.
No, I'm just going to say here that we are doing event delegation when delete button is clicked.
Right.
You can put it whatever you want.
OK, we are going to set this one document, the query selector so HTML class names don't mean panel.
So we're going to set this one as we talk.
We need to find the parents.
So we're going to set this on the parent.
So I'm going to say an event listener.
In any event, listener will be unclick.
Right.
And I'm going to pass in the function here.
Like that.
So I'm just going to close this here and I'm going to pass so this event, we talk about this before,
so we will pass the event object because every event listener is a callback function that have access
to this event.
We can just call it anything E.V. maybe you can call E or E or event.
It's up to you.
Nice.
So I'm just going to see if it's going to work.
I'm going to do console lock.
You don't target.
Let's see if it's working, because this remember, if you see something strange, because when I click
here, everything is in the mean.
Everything is in the main panel.
So whenever I click, wherever I click, it's going to be targeted.
Here it is.
This is the main panel.
When I click here, it's going to be targeted at this one.
But what I do want is when I have food, I have some calories inserted.
I want when I click this button, here it is.
I just want something to happen.
Needs to disappear in that hour.
That is the section two of these projects to to make what whatever we have seen in food or exercise
failed to disappear when we click.
Right.
So here I'm not going to do like this.
I'm just going to create a function and that will be for delete calories.
And yeah, let's call it the calories.
And we got to pass what we got to pass this event here and I'm going to copy this entire one and we
got to pass it here before the daily calories, right.
And we're going to pass it would the DEVANT so we can pass in the event, Lisa, because we before we
did that one show, he or whatever name you want, I'm just going to delete everything from here and
see if this is going to work.
So it's going to be delete delete calories.
OK, now I'm just going to say what he target and what I would like to do is going to blast.
I'm just going press the button here.
Just go.
I'm just going press here it is pressing some some somewhere on the main panel, and that is working.
So that means this e this class is being called from out from inside this event.
Listener Nice.
So we are done with this now.
Just going to delete this and continue working so with our code.
I'm just going to create a couple of variables.
And the first variable will be the parent node.
Don't worry, it will be clear after I do this, the other one, will we get into the idea and the time?
OK, we do have such a number of areas for variables that I haven't talk about.
No, remember that we can grab the parent node and that's why I just want to grab the parent.
I don't need actually just to show you here, I don't need just actually these.
To target these eyeglass or these delete media, I just want to target the entire did this entire and
I just want to delete it, that is my goal.
So that is what I will do, is that is why I'm going to use this parent.
No.
So I'm just going to Conjola.
For either parent node in either target the parent, no.
OK, let's discuss a little bit.
So this AI class, so when I click it, the parent know this class is actually this B10, right.
Because that is the parent.
Now the next parent.
So I did that.
So this should give me the beat and delete item.
So I'm just going to I'm just gonna print it out so you can see.
So we're going to add, let's add food.
One hundred and fifty.
OK, so when I go here.
So when I click these it will give me the beat and write it as I told you, it will give me the parent
because I jump one from this.
This will give me the parent now if I do another parent node.
So if I go one up, one level up that one level, it will give me the parent of this button, which
is this div class and it will give me this class name.
But that is not what I want.
I just want to go one level up so that it's not going to go into D div container, it's not going to
go into this container, but it should go into this because this is the parent that holds these three
containers, their separate one sorry, one, two, three containers.
So when I'm here, when I go one level up, it should go straight that make space.
Lets make space a little bit here.
Oops.
Oh no.
So it will go here.
OK, I'm going to save it in.
Don't worry, it looks a little bit strange but it's going to work now when I, when I display this
I want to have this class and I'm going to copy it just to prove it to you because you can easily forget
what you're trying to get.
Now I'm going to go back there when I click this guy.
Here it is.
I do have the same class.
It's returning me the entire day.
But I just want to show you that I need this class or the ID.
Right.
So that's it.
When I cover it, it's selecting the entire idea.
And that is basically what I want.
So if I had another food with.
So yeah, when I click that one, it will give me the container for this one right before was giving
me the container for the other one.
Here it is.
So now I do have the both containers visible and select.
OK, good.
Now what I need is to grab this idea here and remember I have I d an ID zero, right.
So I just need to grab that ID and it's very simple as this.
So now let me show you one more.
I don't want to leave you souper one.
I just don't want to leave you guessing what it will be.
So when I click I'm going to get this ID and this actually it's mine from before.
Right.
So that's at zero.
And I need and if you want to check, you can go inspect it and it's at zero.
OK, so I need that one.
But what would what will I do with that one.
OK, so I'm going to say I'm done with this, but I'm going to copy the entire thing and I'm going to
put it in an apparent note and I'm going to say, OK, the parent should be equal to this and this should
be on top because you know how we get it.
OK, now I'm going to say, if the parent node, if I do have a result, if I found a parent node,
OK, so what I would like to do, I would like to get this at zero or at one or it can be even burned
zero in button one.
Right.
That will come when we add when we burn calories.
So.
Right.
So it can be even that one or where it is.
It is or it can be this one burned one, burned zero, burned one again, nice.
So we will grab those.
But how are we going to do this?
OK, these variable get ideas.
I will say that the variable to be equal to parent.
No, that split not push split.
And I will say that I want to split where I where I had these dash in my string.
Right.
So where are you going to find this dash in the string.
I want to split it.
And what this actually will do is in these get idee variable, it will be stored on erry.
So if I cancel, like you will see that there will be an array comes along.
Get it now.
I will do have an array with two items.
The first item will be this and in that zero or add in one, the dash will be admitted.
It's not going to be there.
That's why I use split to return millenary.
Oh yeah.
So I'm just going to the console are just going to say for one hundred and fifty I'm going to go back
there.
So when I click delete I just want to have an array here it is two items inside.
The first item is add on the zero position.
The second element is one on its first, it's zero on its first position.
OK, so I did get this what I want, but why do I need this and look closer.
These is and in zero this is array of strings.
It's not array of numbers.
And I need this guy here to be an actual to be actual number.
Right.
So what I can do, I do have another variable idea in that variable.
I just want to store we're going to use the same method pass int.
Remember, this will pass a string to an integer and I will say, OK, get it, in which position will
be that I'm not going to save it.
The position one it's always going to be the position one because this is there.
And I know this for sure because I do have only.
And dash zero eight, dash one and dash fifty five, for example, I do have that to this split method
will give me two area of two items always.
OK, so the idea is there and what I want is the time.
So I get to get the type, the type I will be able to get it as a string.
I don't need it to pass it.
I don't need that.
And that will be in the position of zero and get rid of this one.
OK.
No, just to test it out, console log.
Just grab control of this both idee and type.
We are done.
Pretty much done.
OK, so I'm just going to say here, I'm going to add it up through one hundred and fifty.
I'm going to hit enter.
So now when I click this one, I want to have zero in nice.
So I do have the type, I do have the idea.
So what's next.
Well next is to create.
I'm just going to show you here we need to create, delete, delete the item from our storage object
with the idea in time.
OK, that is going to be our next lecture.
Also we need to delete the calories from the UI, right?
I need to delete it from here.
When I click here, bam, I just want this to be gone.
Not just this one.
The first one should be gone as well.
Right.
OK, I'm just going to give you the space there and what's the last point I want to do?
The last part is to update.
To show.
Updated values in the storage and how are we going to do that?
We have already calculate calories and that contains this method that we are displaying.
So we're going to just call this same old.
So this step, I'm not going to just type it right now, but it will be super, super simple for the
next lecture.
Right.
So we need to take care only of these two.
In this one we already have created and we just going to call it.
That's it.
That's pretty much what we will what we will do.
Right.
So I'm just going to call this method, calculate calories here and done.
But these two, we need to do it separately.
So what we have done this today will create event listener and we have done the event delegation.
Right.
Because if you remember in Domme, the lectures about the time I showed you, what is the event bubbling?
So if you don't know, go back, watch them, you know, have a good example with all of those on order,
at least elements.
All right.
And that's pretty much it.
Also, we've created the lead count calories.
We've been able to get the parent know.
Right.
So even I haven't shown you.
I'm just going to create the exercise.
I'm going to say run one hundred and fifty.
So if I go the exercise, it will be giving me the same and some reason it's working.
OK, let's see.
Let's test it out.
I don't want to do food.
One hundred fifty.
OK, and I'm going to do exercise eggs.
A hundred and fifty.
Very good.
Now when I click here once I'm working.
It's probably not working, these make me look bad because we haven't we haven't gone a lot since I
was a little bit scared for a second.
Okay, for one one.
Okay, x x.
That's not your X, by the way, right now.
Yes.
That's is working.
OK, ladies and gentlemen, I will stop the lecture here without any more hiccups, and I will see you
in the next one.