There will be a time when you need to select an element and
all of its children elements need to be removed.
And so we could write some fancy selector to select pretty much everything.
So we could say, for example, selected div,
and it's like everything inside that div dot remove.
But there's a better way to do this.
And so let's go ahead and set up an example here.
We can say div, and this is going to be our parent element.
So parent element, and this is an HTML comment here. Right there.
Let's write a strong bolded word here.
Italics, it, italicized word here.
And let's also select
or not select the Create a paragraph with some lorem ipsum in there.
And so if we view our page, okay, no big deal.
We still have this div. What if we wanted to select this div?
And let's give this an ID of parent.
What if we wanted to select this parent ID div and get rid of all this stuff in here.
That's really, really easy to do.
And let's actually make this a little bit more complicated.
So first of all, let's start off with div,
select the parent ID.
And then we could just do dot empty.
And what this is going to do is select that ID,
select that div, and just get rid of everything inside of it.
Now we can chain together dot HTML and we could say something like hello world.
And that got rid of all of the elements
inside of this div and replace it with hello world.
Now if we look at our source code,
all of our regular source code is still there.
This is not going to change throughout this course.
All of our source code is going to be exactly as we write it.
Javascript will continue to overwrite it.
So this is going to be exactly what we write and JavaScript is going to change it.
So from here on out, I'm probably not going to show you
the source code too often anymore just because,
well, it's going to work the same way over and over and over again.
Now, let's go ahead and sort of changes into proper JavaScript.
So we could do const.
Parent is equal two. And when you're writing jQuery and you
see a dollar sign in front of a variable name.
That usually means there's some sort of selector.
And so we can go ahead and select this.
And then if we wanted to, we could say parent.value
empty or parents dot HTML stuff in here.
And we're going to CSS stuff in here.
Now, what's sort of interesting about this is sometimes you just need
to empty out an element just for something else to load a little bit later.
But if you need it to happen right away,
we actually don't need to use empty whatsoever.
We can select this entire parent element and we can overwrite
the entire HTML with a sentence that says stuff in here,
Stephan here, and there are no child elements.
Now if you're just coming into the world of
document object models and you're like what's apparent, what's a child?
That's a good question. A parent element holds child elements.
A child element is inside of a parent element.
That's all it is. So let's go ahead and give this example,
a shot here, a little preview.
And we're going to see in here,
we have actually overwritten all of it,
so we didn't have to use dot empty.
We're really comes in is if you have
some processing to do or if you need to fetch data from like an API,
you could parent dot empty.
Let's delete that parent dot empty.
And then do a thing so you can fetch some information from an API somewhere.
And maybe that takes three seconds.
And then you can say parent dot HTML and put some new HTML in there.
In the next lesson, let's start talking about event listeners,
event listener syntax and how we can make something trigger when we click it.