This lesson, we're going to be updating some of our output, so right now, currently when we refresh
our project, we hit roll and we're continuously adding in these divs and they all have a class of deicer.
So this is not exactly what we want.
We want to have only the one div every time we roll it.
We want to overwrite whatever the existing one is.
So we don't want to constantly be adding in new ones.
There's a number of ways to do this and I'm going to make it more difficult way of doing it.
Instead of selecting the class and then just simply updating the entire HTML, we're going to build
out brand new dice.
And then what we want to do is remove the existing one.
So this is a little bit of a challenge and it's an interesting way to solve this problem where we've
got multiple elements and we only want to have one.
So every time we append that means that we're adding it to output.
And that's why every time we hit roll, we've got more and more of them showing up.
So we don't want that to happen.
We want to simply grab all of the children and we can use JavaScript traversing through the elements.
So traversing through that document object model and traversing, we can see that we've got an element
and this element has children and we can see the length of the children of those elements.
So that means we can navigate through the different children and because it's got a length.
So this is within a node list.
So we can select the first child by using the same format as we do with arrays where we're selecting
it via that index value.
So let's try that out first and opening up our ED now.
We've built out brand new element here and we need to first before we append child, we need to select
that output.
And select from the children, whatever the first children are, and hit remove, so using the removed
method in order to remove the children.
So let's try that out.
And now when we go into our console, we see that we've got an error, and that's because this output
has no children.
So we've got an option where we can do a condition here and we can say if output children are zero,
then what we want to do is we want to output and remove that one.
So that can be a quick solution to that.
And that will give us the option that we're only keeping that one child in there.
And if we go into the source code, you can see that as well.
That doesn't matter how many times we're rolling it, we're removing out the existing one.
And it's happening so fast we can't see it.
But trust me, it is happening where we're building out.
So we've got that new one freshly created object and we check to see if it has a child.
And if it does have a child, then we just simply remove out that child and that we need to do before
we append and added the child.
We can also set a starting div now where we can say we don't have to give it any kind of specific classes
or anything.
We can say roll the dice and this can be kind of our trigger to start the rolling of the dice.
And now when we look at this statement, the output children is going to have a first one.
It's going to have that value there.
So it's going to be returning something back so it can console log out the value of it so that we can
take a closer look at it and we can see that it actually now will exist when we refresh the page.
So before we roll the dice, we've got that element there and now want to hit roll.
We grabbed that existing one.
So that was the first child.
And we because it existed, we removed it.
And then we added in the new one.
Now this will continually happen.
So this time around it was a div with the class deicer.
So this is the one that we created.
And now this one got removed and we added in a new one and so on and so on.
So every time we click it from now on, we're going to just simply be updating and removing.
So it is important to try this out for yourself and get familiar with traversing through.
So moving through the dormitory where you can access an element and then move through their children.
And as well, there's a bunch of options here where you can go through first first element child, last
element child.
So you can also be more specific with JavaScript as you traverse through the different available elements.
So go ahead and try this out for yourself.