1
00:00:00,240 --> 00:00:05,490
This lesson, we're going to be updating some of our output, so right now, currently when we refresh

2
00:00:05,490 --> 00:00:12,870
our project, we hit roll and we're continuously adding in these divs and they all have a class of deicer.

3
00:00:13,110 --> 00:00:14,960
So this is not exactly what we want.

4
00:00:15,150 --> 00:00:18,360
We want to have only the one div every time we roll it.

5
00:00:18,510 --> 00:00:21,750
We want to overwrite whatever the existing one is.

6
00:00:21,930 --> 00:00:25,260
So we don't want to constantly be adding in new ones.

7
00:00:25,500 --> 00:00:30,720
There's a number of ways to do this and I'm going to make it more difficult way of doing it.

8
00:00:30,720 --> 00:00:35,670
Instead of selecting the class and then just simply updating the entire HTML, we're going to build

9
00:00:35,670 --> 00:00:37,230
out brand new dice.

10
00:00:37,350 --> 00:00:40,330
And then what we want to do is remove the existing one.

11
00:00:40,560 --> 00:00:46,350
So this is a little bit of a challenge and it's an interesting way to solve this problem where we've

12
00:00:46,350 --> 00:00:49,170
got multiple elements and we only want to have one.

13
00:00:49,320 --> 00:00:53,250
So every time we append that means that we're adding it to output.

14
00:00:53,370 --> 00:00:57,560
And that's why every time we hit roll, we've got more and more of them showing up.

15
00:00:57,720 --> 00:00:59,130
So we don't want that to happen.

16
00:00:59,310 --> 00:01:06,720
We want to simply grab all of the children and we can use JavaScript traversing through the elements.

17
00:01:06,720 --> 00:01:13,230
So traversing through that document object model and traversing, we can see that we've got an element

18
00:01:13,470 --> 00:01:18,390
and this element has children and we can see the length of the children of those elements.

19
00:01:18,600 --> 00:01:24,080
So that means we can navigate through the different children and because it's got a length.

20
00:01:24,120 --> 00:01:25,860
So this is within a node list.

21
00:01:25,980 --> 00:01:32,250
So we can select the first child by using the same format as we do with arrays where we're selecting

22
00:01:32,250 --> 00:01:33,890
it via that index value.

23
00:01:34,230 --> 00:01:39,210
So let's try that out first and opening up our ED now.

24
00:01:39,210 --> 00:01:46,290
We've built out brand new element here and we need to first before we append child, we need to select

25
00:01:46,290 --> 00:01:47,040
that output.

26
00:01:48,500 --> 00:01:56,510
And select from the children, whatever the first children are, and hit remove, so using the removed

27
00:01:56,510 --> 00:01:58,620
method in order to remove the children.

28
00:01:58,880 --> 00:01:59,870
So let's try that out.

29
00:02:00,200 --> 00:02:07,250
And now when we go into our console, we see that we've got an error, and that's because this output

30
00:02:07,280 --> 00:02:08,660
has no children.

31
00:02:09,010 --> 00:02:15,860
So we've got an option where we can do a condition here and we can say if output children are zero,

32
00:02:16,400 --> 00:02:20,290
then what we want to do is we want to output and remove that one.

33
00:02:20,540 --> 00:02:22,850
So that can be a quick solution to that.

34
00:02:23,060 --> 00:02:27,920
And that will give us the option that we're only keeping that one child in there.

35
00:02:28,070 --> 00:02:31,090
And if we go into the source code, you can see that as well.

36
00:02:31,100 --> 00:02:35,750
That doesn't matter how many times we're rolling it, we're removing out the existing one.

37
00:02:35,750 --> 00:02:37,940
And it's happening so fast we can't see it.

38
00:02:38,030 --> 00:02:41,330
But trust me, it is happening where we're building out.

39
00:02:41,340 --> 00:02:46,850
So we've got that new one freshly created object and we check to see if it has a child.

40
00:02:47,090 --> 00:02:52,370
And if it does have a child, then we just simply remove out that child and that we need to do before

41
00:02:52,370 --> 00:02:54,250
we append and added the child.

42
00:02:54,620 --> 00:03:02,180
We can also set a starting div now where we can say we don't have to give it any kind of specific classes

43
00:03:02,180 --> 00:03:02,590
or anything.

44
00:03:02,600 --> 00:03:10,340
We can say roll the dice and this can be kind of our trigger to start the rolling of the dice.

45
00:03:10,520 --> 00:03:16,490
And now when we look at this statement, the output children is going to have a first one.

46
00:03:16,500 --> 00:03:18,170
It's going to have that value there.

47
00:03:18,320 --> 00:03:25,010
So it's going to be returning something back so it can console log out the value of it so that we can

48
00:03:25,010 --> 00:03:30,790
take a closer look at it and we can see that it actually now will exist when we refresh the page.

49
00:03:31,040 --> 00:03:36,260
So before we roll the dice, we've got that element there and now want to hit roll.

50
00:03:36,650 --> 00:03:38,450
We grabbed that existing one.

51
00:03:38,450 --> 00:03:39,680
So that was the first child.

52
00:03:39,980 --> 00:03:43,040
And we because it existed, we removed it.

53
00:03:43,370 --> 00:03:44,850
And then we added in the new one.

54
00:03:45,370 --> 00:03:47,000
Now this will continually happen.

55
00:03:47,150 --> 00:03:50,810
So this time around it was a div with the class deicer.

56
00:03:50,810 --> 00:03:52,340
So this is the one that we created.

57
00:03:52,460 --> 00:03:57,520
And now this one got removed and we added in a new one and so on and so on.

58
00:03:57,530 --> 00:04:02,410
So every time we click it from now on, we're going to just simply be updating and removing.

59
00:04:02,780 --> 00:04:07,910
So it is important to try this out for yourself and get familiar with traversing through.

60
00:04:07,940 --> 00:04:13,640
So moving through the dormitory where you can access an element and then move through their children.

61
00:04:13,820 --> 00:04:19,370
And as well, there's a bunch of options here where you can go through first first element child, last

62
00:04:19,370 --> 00:04:20,060
element child.

63
00:04:20,180 --> 00:04:25,970
So you can also be more specific with JavaScript as you traverse through the different available elements.

64
00:04:26,240 --> 00:04:27,620
So go ahead and try this out for yourself.