Welcome back, my friends, to another lecture today where we are we going to do.
We're going to continue working here.
And when we click actually on this trash icon, I just want this number five or whatever, like I have
to be removed from these items array and also from sorry, from this unordered list and also from the
storage.
So how we can do this, because this is actually an order list element and it's inside this, you know.
So what we can do in our data is it in our data for each we can just create an event listener.
So when any of the well list is clicked, I just want to try to activate this ADD event listener and
to put this click here.
What's happening?
Click here, remove.
I want I want the remove item.
I want to target specific because I have a zoom in too much and that's why that is coming there.
So I want to target these new function, this new function.
I will put it here.
So every time I click on here or whatever, I click on one four to three or here.
I just want this.
You will have to fire off now function, remove, remove item who have e e will be prevented before
will not be able to me.
But what I can do I can also cause a lot e the target.
Remember we've done this now let's see if I click somewhere actually on this.
You will, I will inspect it will go to a console and.
Yeah.
Now I found solution this one you can go here, not there but here in select context only and that should
hide that stupid error.
Right.
So you go here and console settings.
If you select this one it will show select contacts only.
So something is wrong with the Google Chrome.
So I'm going to refresh again now when I click you, is that to do list element is selected, but I
don't want this to do list P select, I just want this one.
So when I click actually on the trash it will give me the icon.
So if I click here it will give me the L iList.
If I click here it will give me the trash so we can prevent that.
So I just want every time I click the trash, only this condition to be true.
So how we can do this, we can just fix our remove item.
Oh I'm just going to comment this one and we can just say if you don't target and I will grab the parent
element.
So if the parent element class less
so now if this contains
this class here to do element, where was it?
I think there's one to do element trash.
OK, so any time that this is happening, I want my program to do something.
I'm going to say council lock success.
Right.
So let's refresh here it is success, success, success.
But if I hear here, it will not.
Now you will know that this is true.
If you do else in console log, you clicked.
You click the elai right now let's see you click the elai success if click the so I don't I want just
want to skip this slide because we don't need it now.
We can do whatever we want because what I've done is just a target, the parent element.
I'm just going to show it to you.
So here it is from this class, actually from this class.
So any time it's click this is the target in the parent of the ally is actually the atrip.
That's why we were looking for this to that containing that.
Right.
If that continue to do list element, that's why we just check to that class and that's why it's working.
Now, one thing that we need to do, I'm just going to refresh here.
I don't want to see this.
Is that.
We can just delete, we can find now, we can find the parent, so we find the parent of the ally of
our class, which is atrip, and easily we can find the parent of the this class, which is Elai.
Now, we just need to add one more line and that's it.
It's going to come and this body here and we're going to do it.
I don't need actually the class list scoop's, not that one parent element.
So this should give me the ELA and I will say remove not child, just I'm going to call remove function.
Let's hope it's going to work.
I'm going to refresh again.
So I just want to remove the number three.
So if I click the number three is not there anymore and that is good.
But if I refresh now it will be here because what we have done, we just remove it from this graphical
user interface.
We didn't remove actually from here.
So if I remove number five, it will be removed.
But number five is still there.
That's why when I refresh, because this is coming from the localhost still displayed.
So we can fix that one as well.
But we need another function now.
Also what we can do, I just going to say, OK, if confirmed and we say sorry a little bit.
So yeah.
If we say confirm, are you sure.
You want to delete
this
item?
No.
What will this do?
So do you think this will help me something?
Yeah, it will give me a notification issue that you want to delete this item or not.
And if I click OK, then it will continue.
If I click, no, it will not go anywhere.
Now I'm going to paste whatever I have here.
I don't need that actually.
Let's let's test it out.
So I just want to see a Pop-Up window, for example.
I should in one you want to do with this item.
So if I click OK, the number four is gone.
If I click on one, the number one is gone.
But these are gone from the URL as though from this list.
But it's not from actual local local storage.
Now we can easily fix this because after the if we can just go here and say we move, we can create
a function, we move, you can call the function, whatever you like, remove from storage.
And here we're going to pass as a parameter.
I'm going to pass the entire parent.
Right, because I don't have any idea here.
It would be nice to have I.D. on each and every trash so you can just go through the IDs here like zero
one to three and delete them.
But I don't have it.
And that's why we need to grab it by their name.
And this will give me you will see what we will just create this function, remove storage.
I'm just going to copy it and we need to create it here, function, remove storage.
But we we're going to change a little bit and this we will call it here.
So the parameter we are passing here, we can call it whatever we want here.
I'm just going to say l I don't like that.
And this function should have its own body.
So I'm just going to console the console like this.
I see what hope to see.
This is the true one I'm going to refresh.
So I'm going to go three and I'm going to.
But we need to just check it here.
I'm going to close it.
Here is this one, the entire thing.
So I'm selecting it, but it's not there.
That's why you can't see it.
So number three, it's passed from this to dysfunction.
No, we can do whatever we want to hear.
But first is just to grab I'm just going to tell you, we need to grab this item.
Sorry.
And I'm just going to copy it and you will see why in a minute.
So I'm going to do it like this.
I'm just going to comment this one.
And so I'm just going to console the
console log.
The items are right now I'm just going to refresh and I'm going to delete the number one and why it's
not OK.
Yeah, delete the number one and a have the entire hour error here, but now I need to loop through
with foreach this area and actually why did I remove this console and I'm not just going to refresh
again so you will be able to see more.
So I want to look through this area and I want to get rid of this item.
So how we can do this so you can do this with a simple for each loop.
Now we can say items array that for each and each side we need to have a function function with two
parameters, single element and index.
You will see in a minute what they all mean.
Now we can control like
console the single element in the index.
Now let's see what will happen.
So when I refresh again, I will do the number one and here it is.
Now we can just see we can see that we have the entire array with its own index.
One is actually zero.
Two is actually one, five is actually four.
So I do have the index.
And now what we can do is easily we can check this item that we pass here is going to show you.
So I'm going to see if with the simple.
I believe we're going to check if this elai item is actually the tax content of this item because we
just can't log the next item, here it is.
So if this text item is equal to a single item.
And the single item is one, two, three, four, so I just want to target which of these is that?
So when I find a hit means this is what is identical.
Now, what I'm going to say, OK, just to test it out, when I say console lock the index, I'm just
going to test out the right index.
So I'm just going to delete this zero.
And I hope I'm going to see the console of I'm going to delete the one or two.
But I want to see if this index I'm I'm going to hit the index.
So I'm just going to delete the number one.
And I want to see yeah, here it is.
It's zero right now.
I know that I can easily remove this from the item array because I do have the index and I have never
shown you, I think before.
The splice can be used to remove from a specific area index to remove something from a specific area
index.
And we do have the index just we need to see index and one.
That's it, nothing else.
Now, this will remove you should remove from the error.
So I'm just going to remove one.
OK, now it's still you're going to still be able to see it, OK, in order to test out if that is removed
from your error.
So what you can do, you can control lock the area outside of these items every now because we just
delete that and we just print out the console logs so we don't need this right away now.
Now, I want to see if the error rate does actually contain two, three, four and five.
So I successfully delete from the error, successfully delete it from here.
So one more step is to successfully delete it from where?
Sorry, from the local storage.
So we need to now save the local storage with this current error.
So how we can do this.
Local storage does save said sorry, not save sit item and we can set the items with items and comma.
Jason, remember why we use this one stringy fi and because it only can hold strings and we're going
to pass the items every now in application when I remove it one of these, I'm just going to show it
to you.
I will update the local storage with this error.
I mean area that we just remove one item and that is how we work.
So, for example, I'm just going to remove five, OK?
And here it is.
Therefore, in the console we have also the releases for here the well is for.
So everything is pretty much working.
So if I remove it, everything will be removed from the both sides there.
It will be empty.
So I'm going to say one, two, three, four, and I'm going to remove the number two.
And actually we need to refresh.
Sometimes it can get stuck.
Number two.
And I'm left with one, two, three and four in the console.
I do have one, three and four.
Right.
How cool is this?
Now the application is working smoothly.
So there is a you can add new things you can restore to you can clear the local storage.
You can clear here, you can set the items back to zero.
And everything is pretty much what we were supposed to do.
Everything is pretty much what we were expect this program to do.
Now, you know how to do a very simple to do list, and it's working right length two, three.
And even if you do the number two, sometimes you need to refresh doing the number two, it will just
kill the number three and one more time the application.
I'm so happy that we have done this.
So Lincoln three done.
And in the console we do have area of two.
Lincoln three.
Nice.
So why this again up here?
Come on.
No, maybe because I refreshed.
So that is pretty much it for this lecture.
We have done a lot of things here guys, and I'm happy.
So if you don't download the files, if you have any problem, see what I have done.
Sometimes you need to clear the cookies, reset the Google Chrome a little bit because it can behave
lubitsch's.
And the thing that's interesting, you see here, they are not from the program, they're not from our
code, it's from Google Chrome.
And yet that's pretty much it.
I hope you enjoyed this part part.
We're going to do another project and that project will be super interesting for you guys.
So you're learning too many, many things in the forward, Adam.
And how you can manipulate Adam in the next project will be super interesting.
Please check them out.
Give me a thumbs up and subscribe whatever you're going to do, just do.
Thank you very much.
See you next time.