Let's take a look at how we can delete an element from a page.
So for this, let's create a more complex example.
Let's create a div.
And it's gonna have a paragraph in here.
And it's going to have lower them in here.
And it's going to have another paragraph in here,
some more Lorem, and another paragraph in here with some more Lorem.
So we have three paragraphs in here.
And let's say we wanted to select this middle one class, middle paragraph.
And when we Viewer page, yes,
it's boring, but this is going to be a good example.
So we have three paragraphs in here,
inside of a div, and one has a class.
So let's go ahead and create an interesting selector here.
But before we do that, let's make sure our jQuery can be loaded.
Document.ready function.
Spell it right for the third time function.
And then we can put our jQuery in here.
Let's go ahead and select this.
Now there's a few different ways we can select this particular paragraph,
but let's go ahead and select one.
In an interesting way, a way we haven't really seen yet.
So let's select all divs on the page.
Then let's select all paragraphs inside of the div.
And then let's make sure that we're only selecting the paragraphs that have
the class middle paragraph, middle paragraph.
So now we're getting into an interesting selector here.
And to delete this,
all we have to do is type dot, remove parentheses.
And that will literally deleted from our document object model.
So if we view our source code here,
we have three paragraphs.
This still shows up. But if I refresh the page,
you can see that it doesn't show up.
And if I go into my elements here, we only have two paragraphs.
Neither of them have the class middle paragraph.
Now what's cool about this is because this is a class selector.
We can say middle paragraph.
It's no longer the middle paragraph,
but let's just pretend it is.
We can select both of these at the same time and delete them at the exact same time.
So now it's going to select our div,
select all paragraphs with a class of middle paragraph.
Well, look, two of them are highlighted there. It's two of them.
And we're going to delete both.
So if we view our source code again,
it still shows up as normal.
There's still three paragraphs in there,
but JavaScript is overriding our page and it's getting rid of the other two.
And in here we have a div and a single paragraph.
We don't have three paragraphs anymore.
Now this is completely safe to do.
This isn't going to ever delete or remove anything off of your computer.
It's only ever going to work with code
inside of your page based on the selector that you give it.
Now if you wanna do, and you could also just say,
hey, select every paragraph, remove it.
But because all of our paragraphs are in a div,
we could select that div and we can remove that too.
And we can see in your document object model that div doesn't exist.
Our source code hasn't changed,
but JavaScript is overriding it.
So what I would like you to do as a fun little task,
go ahead and create any sort of example with HTML.
Select a particular element,
just one of them, and then remove it.
Verify that it's been removed in here.
Verify it's been removed in here.
And once you've done that, let's head on over to the next lesson where we select
an element and then get rid of all of its children elements.
So we're going to empty it out.