1
00:00:02,210 --> 00:00:06,780
So let's make sure we can also hide the modal now and to hide the modal,

2
00:00:06,800 --> 00:00:13,790
we basically need to remove the backdrop and the modal element from the DOM. To remove these elements

3
00:00:13,790 --> 00:00:14,890
here,

4
00:00:14,930 --> 00:00:22,360
I will store modal element in a property not in a constant and the same here for backdrop so that they're

5
00:00:22,360 --> 00:00:28,310
are not just constants that are available in the show method but properties of the entire modal class

6
00:00:28,370 --> 00:00:33,290
or of the instance we create based on the class to be precise, so that we can not just use them here

7
00:00:33,290 --> 00:00:37,130
in the show method but in all methods of this class.

8
00:00:37,130 --> 00:00:43,070
Therefore here of course whenever we use modal element, we need to use this modal element and also

9
00:00:43,070 --> 00:00:48,710
down there when we append it to the DOM, we need to use this modal element and this backdrop element because

10
00:00:48,740 --> 00:00:52,070
these are no longer variables or constants of this method,

11
00:00:52,070 --> 00:00:55,770
these are now properties of the class instance.

12
00:00:55,840 --> 00:01:00,960
Now we can use modal element and backdrop element also in hide and in hide,

13
00:01:00,990 --> 00:01:06,550
I first of all want to check if we have a modal element just to be sure that

14
00:01:06,550 --> 00:01:13,560
before I try to remove it that we at least have it and then we can use document body remove child,

15
00:01:13,570 --> 00:01:21,850
this modal element, alternatively on more modern browsers, you can simply use this modal element remove

16
00:01:23,650 --> 00:01:30,770
and of course also use document body remove child,

17
00:01:30,770 --> 00:01:37,490
this backdrop elements so that we remove the backdrop, the background behind the modal as well

18
00:01:37,490 --> 00:01:43,370
and then I'll set this modal element to null and this backdrop element to null and I do this to tell

19
00:01:43,370 --> 00:01:50,270
Javascript that these properties are cleared and that the references to the DOM elements are no longer

20
00:01:50,300 --> 00:01:55,340
needed and can be cleaned up so that we don't have them in memory and create memory leaks,

21
00:01:55,340 --> 00:01:58,170
that's why I set these two properties to null thereafter.

22
00:01:58,190 --> 00:02:02,750
This is one use case where setting something to null make sense because I want to make it clear that

23
00:02:02,750 --> 00:02:06,400
this is reset and that I don't need these elements anymore.

24
00:02:06,410 --> 00:02:11,750
Now with that, if we save that and we go back and click on get current location, we see that spinner here

25
00:02:11,750 --> 00:02:16,190
but as soon as we got the location, it indeed is removed.

26
00:02:16,190 --> 00:02:21,890
So that is working, the second and the other times are way faster which is why we only see this blink

27
00:02:21,890 --> 00:02:22,290
up

28
00:02:22,490 --> 00:02:24,620
but it generally works as we want

29
00:02:24,620 --> 00:02:30,020
and with that we get the modal finished we can move right away to the next step and make sure that we

30
00:02:30,020 --> 00:02:36,170
now also display a map with a pin on the place of the location the user got.