WEBVTT 00:01.350 --> 00:07.200 OK, as we said in this lecture, we're going to program delete button, so when we click on delete, 00:07.200 --> 00:12.350 the question should be removed from question list and also we should get the default view, as it was 00:12.350 --> 00:14.310 in case of clicking on update button. 00:15.030 --> 00:15.480 All right. 00:15.840 --> 00:19.440 Let's go back to brackets for deleting question. 00:19.440 --> 00:23.690 We need to create new function inside added question list method. 00:24.150 --> 00:26.520 I'm going to use again function expression. 00:26.880 --> 00:30.510 But before that, as it was in case of update question part. 00:30.870 --> 00:36.170 First of all, we need to attach to delete button click event using event handler. 00:36.840 --> 00:39.210 So let's write the items. 00:40.270 --> 00:43.270 Dot question, delete an. 00:44.200 --> 00:46.810 And then right on unclick. 00:47.750 --> 00:53.780 Again, I'm going to be to it in advance function, let's call it valid question. 00:56.270 --> 01:02.330 Then creative function expression, so write variable billett question. 01:03.930 --> 01:06.300 Equals to anonymous function. 01:09.140 --> 01:14.570 Let's at first test how it works right inside the function console that log works. 01:17.110 --> 01:23.830 Then go to the browser, reload the page, then click on added button, click on delete. 01:24.960 --> 01:32.970 And you see that it works, OK, fine, in order to delete item from local storage, we need to get 01:32.970 --> 01:37.070 access on storage question list, which is actually a right. 01:37.500 --> 01:38.610 So that's right. 01:39.150 --> 01:40.950 Get storage question list. 01:42.770 --> 01:48.140 So we have access on an air right now and we need to delete the native question items from that are 01:48.140 --> 01:48.400 right. 01:48.920 --> 01:51.800 For that, I'm going to use again splice method. 01:53.760 --> 02:00.450 Because of that, we need only to delete item and not replace it, therefore supplies method will hold 02:00.450 --> 02:01.350 two parameters. 02:01.800 --> 02:06.020 The first one will be position from where we want to delete the item. 02:06.660 --> 02:08.520 As you know, it's already defined. 02:08.550 --> 02:11.010 So let's pass your place in array. 02:12.470 --> 02:18.500 And as a second parameter, we need to place the number of items we want to delete, which in this case 02:18.500 --> 02:19.190 is one. 02:21.000 --> 02:26.640 So when we delete the item after that, we have to overwrites, updated a right to an old one. 02:27.180 --> 02:32.110 For that, you guess that we have to use again said question collection method. 02:32.520 --> 02:32.910 So. 02:32.910 --> 02:33.330 Right. 02:33.810 --> 02:35.580 Storage question list. 02:36.820 --> 02:39.040 That set question collection. 02:40.720 --> 02:47.260 And of course, as a parameter, this method should hold and updated, right, which is get storage 02:47.260 --> 02:48.100 question list. 02:50.130 --> 02:57.810 OK, let's go to the browser and test how the little question function works without click on add it, 02:58.740 --> 03:00.300 then click on delete button. 03:01.570 --> 03:06.040 Reload the page again, and you said that the question is the latest from the question list. 03:06.610 --> 03:10.510 If we check local storage, let's go to the application. 03:12.050 --> 03:20.120 Then we will find that the question is related from local storage as well, so we can say that function 03:20.120 --> 03:26.060 works, but we have here same things to fix as it was in case of upgrade question part. 03:26.480 --> 03:29.540 So the question is not related dynamically from the list. 03:29.840 --> 03:33.630 And also when we click on delete button, we don't get a default view here. 03:34.520 --> 03:35.330 Let's fix that. 03:35.330 --> 03:36.380 Go to Brackett's. 03:37.160 --> 03:42.890 Actually, we need to pass in this function the exact same stuff as it's in Update's question function. 03:43.670 --> 03:49.490 But I think and you should agree with me that if we copy all of this stuff and paste into that question 03:49.490 --> 03:56.030 function, it won't be a smart decision in order to avoid repeating the same code over again, we can 03:56.030 --> 04:02.720 simply create a new function, then put this code inside this function and then invoke this function 04:02.720 --> 04:08.690 in Update's question function and in delete question function is what makes sense. 04:10.040 --> 04:16.160 All right, let's create a function expression and call it back default view. 04:19.390 --> 04:21.700 That aside to it, anonymous function. 04:25.360 --> 04:32.020 Then cut from Update's question, function A of this stuff and. 04:34.850 --> 04:46.390 Then pasted inside their default view function, also let's organize the code for better visibility. 04:48.120 --> 04:54.990 You see that we have your option elements inside followed, but option elements is created in Update's 04:54.990 --> 04:55.910 question function. 04:56.310 --> 05:01.290 Therefore, because of this collapse, we have not access on that variable anymore. 05:02.010 --> 05:05.880 In order to fix that, let's simply create a new variable. 05:06.670 --> 05:10.710 Let's declare it right for updated options. 05:13.880 --> 05:21.200 And then copy this line of code and assign it to updated options variable. 05:23.850 --> 05:29.040 Also, we need to change of the option elements into updated options. 05:33.920 --> 05:40.370 All right, the only thing that we have to do is to invoke this function in Update's question function 05:41.090 --> 05:43.230 and in question function as well. 05:43.730 --> 05:44.570 Let's do it. 05:45.860 --> 05:49.010 Call this function of the first update question function. 05:51.580 --> 05:55.480 Then do the same in the lead question function. 05:57.790 --> 06:02.290 OK, now everything is ready, let's go to the browser. 06:03.280 --> 06:07.990 Reload the page, click on edit button, then click on delete. 06:08.230 --> 06:09.290 And here we go. 06:09.850 --> 06:13.090 The question is deleted from the question list dynamically. 06:13.630 --> 06:15.550 Also, we have a default view here. 06:15.700 --> 06:19.120 And if we check the local storage. 06:21.420 --> 06:24.360 Will find there an empty array. 06:26.170 --> 06:27.470 All right, great. 06:27.730 --> 06:32.390 We have just finished the entire added question part, it was really big method. 06:32.410 --> 06:34.240 It contained multiple functions. 06:34.570 --> 06:38.500 But at the same time, I'm sure that it was really interesting for you. 06:39.170 --> 06:40.470 OK, let's move on.