1
00:00:01,560 --> 00:00:04,570
Welcome back, my friends, to another lecture today where we are we going to do.

2
00:00:04,590 --> 00:00:07,340
We're going to continue working here.

3
00:00:07,380 --> 00:00:14,640
And when we click actually on this trash icon, I just want this number five or whatever, like I have

4
00:00:14,910 --> 00:00:24,660
to be removed from these items array and also from sorry, from this unordered list and also from the

5
00:00:24,660 --> 00:00:25,210
storage.

6
00:00:25,740 --> 00:00:34,590
So how we can do this, because this is actually an order list element and it's inside this, you know.

7
00:00:34,620 --> 00:00:47,800
So what we can do in our data is it in our data for each we can just create an event listener.

8
00:00:48,300 --> 00:00:57,360
So when any of the well list is clicked, I just want to try to activate this ADD event listener and

9
00:00:57,360 --> 00:00:58,740
to put this click here.

10
00:00:58,980 --> 00:00:59,670
What's happening?

11
00:01:00,030 --> 00:01:02,610
Click here, remove.

12
00:01:02,880 --> 00:01:07,680
I want I want the remove item.

13
00:01:07,830 --> 00:01:13,070
I want to target specific because I have a zoom in too much and that's why that is coming there.

14
00:01:13,350 --> 00:01:16,110
So I want to target these new function, this new function.

15
00:01:16,260 --> 00:01:17,220
I will put it here.

16
00:01:17,640 --> 00:01:27,540
So every time I click on here or whatever, I click on one four to three or here.

17
00:01:27,540 --> 00:01:28,470
I just want this.

18
00:01:28,470 --> 00:01:41,400
You will have to fire off now function, remove, remove item who have e e will be prevented before

19
00:01:41,430 --> 00:01:42,960
will not be able to me.

20
00:01:42,970 --> 00:01:49,410
But what I can do I can also cause a lot e the target.

21
00:01:50,040 --> 00:01:56,400
Remember we've done this now let's see if I click somewhere actually on this.

22
00:01:56,400 --> 00:02:01,760
You will, I will inspect it will go to a console and.

23
00:02:01,770 --> 00:02:02,190
Yeah.

24
00:02:02,940 --> 00:02:12,210
Now I found solution this one you can go here, not there but here in select context only and that should

25
00:02:12,510 --> 00:02:14,520
hide that stupid error.

26
00:02:14,730 --> 00:02:15,140
Right.

27
00:02:15,360 --> 00:02:17,520
So you go here and console settings.

28
00:02:18,000 --> 00:02:21,150
If you select this one it will show select contacts only.

29
00:02:21,150 --> 00:02:23,370
So something is wrong with the Google Chrome.

30
00:02:23,370 --> 00:02:31,170
So I'm going to refresh again now when I click you, is that to do list element is selected, but I

31
00:02:31,170 --> 00:02:34,610
don't want this to do list P select, I just want this one.

32
00:02:34,770 --> 00:02:38,430
So when I click actually on the trash it will give me the icon.

33
00:02:38,550 --> 00:02:41,820
So if I click here it will give me the L iList.

34
00:02:42,060 --> 00:02:46,530
If I click here it will give me the trash so we can prevent that.

35
00:02:46,980 --> 00:02:52,760
So I just want every time I click the trash, only this condition to be true.

36
00:02:53,520 --> 00:02:58,260
So how we can do this, we can just fix our remove item.

37
00:02:58,650 --> 00:03:09,120
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

38
00:03:09,120 --> 00:03:09,720
element.

39
00:03:12,090 --> 00:03:14,730
So if the parent element class less

40
00:03:17,940 --> 00:03:20,070
so now if this contains

41
00:03:22,620 --> 00:03:25,800
this class here to do element, where was it?

42
00:03:27,090 --> 00:03:29,010
I think there's one to do element trash.

43
00:03:31,260 --> 00:03:39,420
OK, so any time that this is happening, I want my program to do something.

44
00:03:39,660 --> 00:03:43,710
I'm going to say council lock success.

45
00:03:45,420 --> 00:03:45,780
Right.

46
00:03:46,440 --> 00:03:51,630
So let's refresh here it is success, success, success.

47
00:03:51,630 --> 00:03:53,640
But if I hear here, it will not.

48
00:03:53,640 --> 00:03:56,370
Now you will know that this is true.

49
00:03:56,370 --> 00:04:02,910
If you do else in console log, you clicked.

50
00:04:05,250 --> 00:04:15,270
You click the elai right now let's see you click the elai success if click the so I don't I want just

51
00:04:15,270 --> 00:04:18,330
want to skip this slide because we don't need it now.

52
00:04:18,330 --> 00:04:24,720
We can do whatever we want because what I've done is just a target, the parent element.

53
00:04:24,740 --> 00:04:26,060
I'm just going to show it to you.

54
00:04:26,520 --> 00:04:31,440
So here it is from this class, actually from this class.

55
00:04:31,980 --> 00:04:39,120
So any time it's click this is the target in the parent of the ally is actually the atrip.

56
00:04:39,120 --> 00:04:43,110
That's why we were looking for this to that containing that.

57
00:04:43,320 --> 00:04:43,740
Right.

58
00:04:43,950 --> 00:04:51,090
If that continue to do list element, that's why we just check to that class and that's why it's working.

59
00:04:51,090 --> 00:04:56,370
Now, one thing that we need to do, I'm just going to refresh here.

60
00:04:56,370 --> 00:04:57,420
I don't want to see this.

61
00:04:57,870 --> 00:04:59,730
Is that.

62
00:04:59,850 --> 00:05:07,590
We can just delete, we can find now, we can find the parent, so we find the parent of the ally of

63
00:05:07,590 --> 00:05:14,690
our class, which is atrip, and easily we can find the parent of the this class, which is Elai.

64
00:05:14,880 --> 00:05:19,230
Now, we just need to add one more line and that's it.

65
00:05:19,660 --> 00:05:23,930
It's going to come and this body here and we're going to do it.

66
00:05:24,330 --> 00:05:30,980
I don't need actually the class list scoop's, not that one parent element.

67
00:05:31,140 --> 00:05:40,820
So this should give me the ELA and I will say remove not child, just I'm going to call remove function.

68
00:05:41,550 --> 00:05:42,720
Let's hope it's going to work.

69
00:05:42,720 --> 00:05:43,980
I'm going to refresh again.

70
00:05:44,400 --> 00:05:46,530
So I just want to remove the number three.

71
00:05:46,650 --> 00:05:51,330
So if I click the number three is not there anymore and that is good.

72
00:05:51,690 --> 00:05:59,280
But if I refresh now it will be here because what we have done, we just remove it from this graphical

73
00:05:59,280 --> 00:06:00,060
user interface.

74
00:06:00,060 --> 00:06:02,420
We didn't remove actually from here.

75
00:06:02,430 --> 00:06:04,950
So if I remove number five, it will be removed.

76
00:06:04,950 --> 00:06:06,260
But number five is still there.

77
00:06:06,270 --> 00:06:11,070
That's why when I refresh, because this is coming from the localhost still displayed.

78
00:06:11,430 --> 00:06:14,940
So we can fix that one as well.

79
00:06:14,940 --> 00:06:17,370
But we need another function now.

80
00:06:17,730 --> 00:06:28,730
Also what we can do, I just going to say, OK, if confirmed and we say sorry a little bit.

81
00:06:29,370 --> 00:06:30,780
So yeah.

82
00:06:30,870 --> 00:06:33,270
If we say confirm, are you sure.

83
00:06:37,190 --> 00:06:40,220
You want to delete

84
00:06:42,650 --> 00:06:43,190
this

85
00:06:45,860 --> 00:06:46,220
item?

86
00:06:46,460 --> 00:06:46,870
No.

87
00:06:47,270 --> 00:06:49,040
What will this do?

88
00:06:49,160 --> 00:06:52,370
So do you think this will help me something?

89
00:06:52,400 --> 00:06:56,860
Yeah, it will give me a notification issue that you want to delete this item or not.

90
00:06:57,140 --> 00:06:59,660
And if I click OK, then it will continue.

91
00:06:59,840 --> 00:07:03,720
If I click, no, it will not go anywhere.

92
00:07:04,190 --> 00:07:06,650
Now I'm going to paste whatever I have here.

93
00:07:06,650 --> 00:07:08,260
I don't need that actually.

94
00:07:09,320 --> 00:07:10,780
Let's let's test it out.

95
00:07:12,380 --> 00:07:15,050
So I just want to see a Pop-Up window, for example.

96
00:07:15,320 --> 00:07:17,330
I should in one you want to do with this item.

97
00:07:17,330 --> 00:07:19,670
So if I click OK, the number four is gone.

98
00:07:19,670 --> 00:07:22,220
If I click on one, the number one is gone.

99
00:07:22,220 --> 00:07:25,370
But these are gone from the URL as though from this list.

100
00:07:25,670 --> 00:07:29,320
But it's not from actual local local storage.

101
00:07:29,600 --> 00:07:42,020
Now we can easily fix this because after the if we can just go here and say we move, we can create

102
00:07:42,020 --> 00:07:46,220
a function, we move, you can call the function, whatever you like, remove from storage.

103
00:07:47,990 --> 00:07:51,250
And here we're going to pass as a parameter.

104
00:07:51,260 --> 00:07:53,810
I'm going to pass the entire parent.

105
00:07:54,590 --> 00:07:57,230
Right, because I don't have any idea here.

106
00:07:57,530 --> 00:08:05,660
It would be nice to have I.D. on each and every trash so you can just go through the IDs here like zero

107
00:08:05,660 --> 00:08:06,860
one to three and delete them.

108
00:08:06,860 --> 00:08:07,640
But I don't have it.

109
00:08:08,000 --> 00:08:11,180
And that's why we need to grab it by their name.

110
00:08:11,480 --> 00:08:20,330
And this will give me you will see what we will just create this function, remove storage.

111
00:08:20,330 --> 00:08:26,000
I'm just going to copy it and we need to create it here, function, remove storage.

112
00:08:26,150 --> 00:08:31,940
But we we're going to change a little bit and this we will call it here.

113
00:08:32,750 --> 00:08:36,590
So the parameter we are passing here, we can call it whatever we want here.

114
00:08:36,740 --> 00:08:40,070
I'm just going to say l I don't like that.

115
00:08:40,460 --> 00:08:43,100
And this function should have its own body.

116
00:08:43,340 --> 00:08:49,040
So I'm just going to console the console like this.

117
00:08:49,850 --> 00:08:51,980
I see what hope to see.

118
00:08:52,000 --> 00:08:55,160
This is the true one I'm going to refresh.

119
00:08:55,460 --> 00:08:57,470
So I'm going to go three and I'm going to.

120
00:08:57,860 --> 00:08:59,450
But we need to just check it here.

121
00:08:59,690 --> 00:09:00,630
I'm going to close it.

122
00:09:00,770 --> 00:09:04,220
Here is this one, the entire thing.

123
00:09:04,220 --> 00:09:06,430
So I'm selecting it, but it's not there.

124
00:09:06,440 --> 00:09:07,420
That's why you can't see it.

125
00:09:07,570 --> 00:09:13,400
So number three, it's passed from this to dysfunction.

126
00:09:13,850 --> 00:09:17,330
No, we can do whatever we want to hear.

127
00:09:17,330 --> 00:09:24,260
But first is just to grab I'm just going to tell you, we need to grab this item.

128
00:09:24,260 --> 00:09:24,770
Sorry.

129
00:09:25,460 --> 00:09:30,920
And I'm just going to copy it and you will see why in a minute.

130
00:09:32,480 --> 00:09:33,740
So I'm going to do it like this.

131
00:09:33,740 --> 00:09:35,150
I'm just going to comment this one.

132
00:09:36,620 --> 00:09:40,400
And so I'm just going to console the

133
00:09:43,640 --> 00:09:44,450
console log.

134
00:09:44,450 --> 00:09:56,420
The items are right now I'm just going to refresh and I'm going to delete the number one and why it's

135
00:09:56,420 --> 00:09:57,230
not OK.

136
00:09:57,230 --> 00:10:05,270
Yeah, delete the number one and a have the entire hour error here, but now I need to loop through

137
00:10:05,270 --> 00:10:12,710
with foreach this area and actually why did I remove this console and I'm not just going to refresh

138
00:10:12,710 --> 00:10:15,500
again so you will be able to see more.

139
00:10:15,620 --> 00:10:19,490
So I want to look through this area and I want to get rid of this item.

140
00:10:19,490 --> 00:10:23,570
So how we can do this so you can do this with a simple for each loop.

141
00:10:23,960 --> 00:10:38,240
Now we can say items array that for each and each side we need to have a function function with two

142
00:10:38,240 --> 00:10:43,880
parameters, single element and index.

143
00:10:44,540 --> 00:10:47,600
You will see in a minute what they all mean.

144
00:10:48,110 --> 00:10:49,970
Now we can control like

145
00:10:52,490 --> 00:10:57,030
console the single element in the index.

146
00:10:58,370 --> 00:11:01,630
Now let's see what will happen.

147
00:11:01,880 --> 00:11:06,590
So when I refresh again, I will do the number one and here it is.

148
00:11:07,910 --> 00:11:17,150
Now we can just see we can see that we have the entire array with its own index.

149
00:11:17,690 --> 00:11:19,940
One is actually zero.

150
00:11:19,940 --> 00:11:22,610
Two is actually one, five is actually four.

151
00:11:22,820 --> 00:11:24,410
So I do have the index.

152
00:11:25,010 --> 00:11:32,950
And now what we can do is easily we can check this item that we pass here is going to show you.

153
00:11:33,350 --> 00:11:35,000
So I'm going to see if with the simple.

154
00:11:35,000 --> 00:11:43,100
I believe we're going to check if this elai item is actually the tax content of this item because we

155
00:11:43,100 --> 00:11:45,750
just can't log the next item, here it is.

156
00:11:46,970 --> 00:11:52,610
So if this text item is equal to a single item.

157
00:11:56,060 --> 00:12:02,440
And the single item is one, two, three, four, so I just want to target which of these is that?

158
00:12:02,630 --> 00:12:05,990
So when I find a hit means this is what is identical.

159
00:12:06,440 --> 00:12:15,710
Now, what I'm going to say, OK, just to test it out, when I say console lock the index, I'm just

160
00:12:15,710 --> 00:12:17,750
going to test out the right index.

161
00:12:18,110 --> 00:12:20,810
So I'm just going to delete this zero.

162
00:12:20,810 --> 00:12:26,090
And I hope I'm going to see the console of I'm going to delete the one or two.

163
00:12:26,540 --> 00:12:29,570
But I want to see if this index I'm I'm going to hit the index.

164
00:12:29,570 --> 00:12:31,490
So I'm just going to delete the number one.

165
00:12:31,790 --> 00:12:33,590
And I want to see yeah, here it is.

166
00:12:33,770 --> 00:12:36,350
It's zero right now.

167
00:12:36,350 --> 00:12:46,100
I know that I can easily remove this from the item array because I do have the index and I have never

168
00:12:46,100 --> 00:12:47,360
shown you, I think before.

169
00:12:47,540 --> 00:12:56,420
The splice can be used to remove from a specific area index to remove something from a specific area

170
00:12:56,420 --> 00:12:56,930
index.

171
00:12:57,080 --> 00:13:03,650
And we do have the index just we need to see index and one.

172
00:13:03,950 --> 00:13:05,880
That's it, nothing else.

173
00:13:06,810 --> 00:13:12,980
Now, this will remove you should remove from the error.

174
00:13:13,100 --> 00:13:14,530
So I'm just going to remove one.

175
00:13:15,620 --> 00:13:25,280
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

176
00:13:25,280 --> 00:13:27,070
from your error.

177
00:13:27,230 --> 00:13:33,770
So what you can do, you can control lock the area outside of these items every now because we just

178
00:13:33,770 --> 00:13:39,970
delete that and we just print out the console logs so we don't need this right away now.

179
00:13:40,430 --> 00:13:48,800
Now, I want to see if the error rate does actually contain two, three, four and five.

180
00:13:48,800 --> 00:13:52,240
So I successfully delete from the error, successfully delete it from here.

181
00:13:52,670 --> 00:13:56,780
So one more step is to successfully delete it from where?

182
00:13:57,710 --> 00:13:59,660
Sorry, from the local storage.

183
00:13:59,870 --> 00:14:06,610
So we need to now save the local storage with this current error.

184
00:14:06,710 --> 00:14:07,700
So how we can do this.

185
00:14:08,030 --> 00:14:21,500
Local storage does save said sorry, not save sit item and we can set the items with items and comma.

186
00:14:21,920 --> 00:14:30,500
Jason, remember why we use this one stringy fi and because it only can hold strings and we're going

187
00:14:30,500 --> 00:14:38,690
to pass the items every now in application when I remove it one of these, I'm just going to show it

188
00:14:38,690 --> 00:14:39,020
to you.

189
00:14:40,070 --> 00:14:44,300
I will update the local storage with this error.

190
00:14:44,780 --> 00:14:49,520
I mean area that we just remove one item and that is how we work.

191
00:14:49,640 --> 00:14:52,550
So, for example, I'm just going to remove five, OK?

192
00:14:52,760 --> 00:14:53,630
And here it is.

193
00:14:53,660 --> 00:15:00,530
Therefore, in the console we have also the releases for here the well is for.

194
00:15:00,530 --> 00:15:02,390
So everything is pretty much working.

195
00:15:02,690 --> 00:15:07,790
So if I remove it, everything will be removed from the both sides there.

196
00:15:07,790 --> 00:15:08,540
It will be empty.

197
00:15:08,540 --> 00:15:17,450
So I'm going to say one, two, three, four, and I'm going to remove the number two.

198
00:15:19,310 --> 00:15:20,540
And actually we need to refresh.

199
00:15:20,540 --> 00:15:22,070
Sometimes it can get stuck.

200
00:15:22,460 --> 00:15:23,180
Number two.

201
00:15:23,180 --> 00:15:26,840
And I'm left with one, two, three and four in the console.

202
00:15:26,990 --> 00:15:28,760
I do have one, three and four.

203
00:15:28,820 --> 00:15:29,230
Right.

204
00:15:30,680 --> 00:15:31,460
How cool is this?

205
00:15:31,610 --> 00:15:33,650
Now the application is working smoothly.

206
00:15:33,800 --> 00:15:41,540
So there is a you can add new things you can restore to you can clear the local storage.

207
00:15:41,540 --> 00:15:46,040
You can clear here, you can set the items back to zero.

208
00:15:46,370 --> 00:15:50,540
And everything is pretty much what we were supposed to do.

209
00:15:50,540 --> 00:15:54,320
Everything is pretty much what we were expect this program to do.

210
00:15:54,380 --> 00:16:06,260
Now, you know how to do a very simple to do list, and it's working right length two, three.

211
00:16:06,740 --> 00:16:13,130
And even if you do the number two, sometimes you need to refresh doing the number two, it will just

212
00:16:13,130 --> 00:16:16,640
kill the number three and one more time the application.

213
00:16:16,670 --> 00:16:18,290
I'm so happy that we have done this.

214
00:16:18,410 --> 00:16:19,610
So Lincoln three done.

215
00:16:19,940 --> 00:16:22,520
And in the console we do have area of two.

216
00:16:22,880 --> 00:16:23,600
Lincoln three.

217
00:16:24,350 --> 00:16:24,920
Nice.

218
00:16:25,040 --> 00:16:27,590
So why this again up here?

219
00:16:28,430 --> 00:16:29,000
Come on.

220
00:16:30,410 --> 00:16:33,430
No, maybe because I refreshed.

221
00:16:33,440 --> 00:16:36,230
So that is pretty much it for this lecture.

222
00:16:36,230 --> 00:16:39,290
We have done a lot of things here guys, and I'm happy.

223
00:16:39,500 --> 00:16:45,140
So if you don't download the files, if you have any problem, see what I have done.

224
00:16:45,530 --> 00:16:52,820
Sometimes you need to clear the cookies, reset the Google Chrome a little bit because it can behave

225
00:16:53,270 --> 00:16:53,680
lubitsch's.

226
00:16:53,980 --> 00:17:00,100
And the thing that's interesting, you see here, they are not from the program, they're not from our

227
00:17:00,100 --> 00:17:01,690
code, it's from Google Chrome.

228
00:17:02,050 --> 00:17:03,990
And yet that's pretty much it.

229
00:17:04,010 --> 00:17:06,900
I hope you enjoyed this part part.

230
00:17:06,910 --> 00:17:10,380
We're going to do another project and that project will be super interesting for you guys.

231
00:17:10,570 --> 00:17:15,660
So you're learning too many, many things in the forward, Adam.

232
00:17:15,670 --> 00:17:19,540
And how you can manipulate Adam in the next project will be super interesting.

233
00:17:19,540 --> 00:17:20,950
Please check them out.

234
00:17:21,280 --> 00:17:26,340
Give me a thumbs up and subscribe whatever you're going to do, just do.

235
00:17:26,470 --> 00:17:27,160
Thank you very much.

236
00:17:27,190 --> 00:17:27,930
See you next time.