This lesson we're going to be looking at Naude remove child method, which removes a child node from
the dorm and returns the remote removed node, so it actually returns the removed node.
So it's set up and go into our HTML code and we're going to create some device.
So first of that, we're going to create is going to be the parent or this is going to be whatever the
top div is and then went in the top div.
We're going to have a nested div as well and give that one a class of nested and we can create a few
of these.
So we'll have nested one, two and three.
So we'll have a few different nested elements on the page.
So the objective is to use JavaScript and remove them from the page.
Let's apply some JavaScript and remove the elements.
So first, let's make a selection of the element that we want to remove.
So this is going to be the top element that we want to remove and selecting it, using the document
object and using query selector, we're going to select the element with a class of top so as to indicate
that with a dot and top.
So that will select that element for us within that object so that we can use that.
And then also let's select the nested elements.
So we'll just call this the next one and again, using the document and query selector and we just always
select the first one.
So select whatever one is nested.
And now let's remove the child, so let's remove elements and select that element that we want to remove
and we need to select the parent.
So using the parent element object and using the remove child method.
So it's going to remove the child node from the dorm and it also returns the removed child.
And then we need to specify which element we want to remove.
And now if we cancel log the removed element, we've got the element object there.
And then let's also try to console log the existing element so that one that we just removed.
So what do you think is going to get returned back in the first console?
And what do you think is going to be a return back in the second console message?
Let's check it out and see what happens.
So we still have the removed element that's selected into this is the return of the removed element.
So on the callback, it gives us the element that was removed.
And then we also still have that element sitting within the object because we've defined the object
as.
So we've got our main element, which is the top element, and then we have the next one, which is
still referencing that same memory location where the nested object was sitting.
So we can also remove that element by removing out so we don't have to specify the parent.
We can remove the element itself.
So let's do that for next to where we're going to use the documents and query selector.
And this time we're going to do a query selector, all because we want to select the second element.
So we need to select all of the elements in node list and then specify which elements we want to work
with.
So we're using Nesto and we're getting all of the nested elements.
And if you console log next to that's going to return back all of the elements that are nested.
So we've got a node list and currently we still have the two that are available in there because we
have removed out the one that's there.
So we've removed out that first one there.
So if we were to actually to change the order of the code, we should still have all three elements
that are listed out when we do the slight query selector all.
And we've got the naughty list of three elements, so that also includes the memory location reference
to nested one so that one is still within our node list.
And that way, whenever we do the remove, we can still reference it by the order that we're seeing
it on the page.
So using Nest with an index value of one, this is going to reference that second one.
So with the value of nested too.
So let's go ahead and we're going to remove this one and this time we're going to remove it without
having to specify the parent node.
So we've made the selection and first we want to check to make sure that the node actually exists.
So let's select next to with an index of one and selecting whatever the parent node is.
So this is going to return back the parent of the specified node tree.
So we're going to see if it actually exists.
And before we do that, we'll log that out into the console so that we can see that it exists and before
we actually check to see if it exists.
So if it exists or if this element does have a parent node, then we can use that parent node and navigate
to the element that we want to remove.
So similar to what we just did here when we did the removed child.
But this way we don't have to make a selection of that parent element as we're just going to use whatever
one we're referencing.
And then we also have the node that we're referencing here, and that's to index value one.
So this way, this will give us the ability to remove that one.
So now we've removed out nested two as well and it gets returned back.
So within that parent that we're returning back, we see that we've got nested three because this is
referencing that parent object and nested two is the one that got removed, nested one also got removed
and then nested is the one that we're still out putting into the console.
So let me actually move this, change the order and move that around.
So also, if we want to remove all children from an element, we can do that as well.
So if we wanted to save ourselves some time, instead of selecting each one individually, we can remove
all of them and we need to specify only need to make a selection of the parent.
So what I'll do is I'm going to comment all of this out and toggle a block comment so that that code
is not going to be running and we're going to make a selection of the parent.
And what we want to do is remove out all the child elements.
So we're going to select the while and then using Taupo.
And while it has a first child, so while that exists, we can continue to loop through and we do need
a way out of this loop, and that means that once we run out of children within the.
Topple within that selection, then we're not going to have any more children to remove and we're going
to break the loop, so let's make a selection of this element so thoughtful.
So just as we saw before, and then use the remove child method and then we're selecting the element,
the parent element and using the first child to navigate and return back that first child and so removed
element.
Assign a value to that.
And what I'll do is I'll console like the removed element and let's also push it into an array.
So it created an array, just a blank array.
That's an object.
Let's create an array.
And what we can do is we can take that tree and push into the array.
Whatever that removed element was would be.
So after we finished while loop, we can console log the value of temp, which is going to be the array
that's holding all of the removed elements.
So let's see what happens.
So we loop through and we remove all of the elements from the page and from that parent elements.
And we see that we've also removed out the children here.
So we've removed the text separately.
So we've actually removed at six children from that parent element.
And one of them was the text and then the next was the div.
And then we had the text because we are removing out nodes.
So it's not referring to the elements.
So this is a little bit misleading, but we are removing out the nodes.
So actually this should be removed node as it's referencing the node.
That was removed from the page and not the entire element that we were removing, and that's how you
can use that remove child to remove out elements from the page.
So God tried it.