In the earlier lessons, we saw how we can clone elements and we also saw how we can select them, apply,
update their properties, their style, update their positions, make them dragonball.
So a whole bunch of really cool things that we've done in the earlier lessons.
And last but not least, we need a way to get rid of our elements.
So now that we've moved it over our trash bin, which is this block square over here, we want to remove
that element.
So opening up our Ed and we already have the condition in place, checking to see if we're on top.
And if we are, then we can run a block of code.
So that's already ready for us.
And that is Cleide.
We can get rid of the Al statement.
We don't need that anymore.
So if it is colliding, if it is on top, then we're going to select that element and we're going to
get rid of the on most down and we're going to set it to null.
So that's not going to be active anymore.
And we're also going to select that element.
And this is where things get a little bit tricky because we have to traverse up to the parent element
and then remove the child element that has the properties, the value of that element.
So you have to go up to the parent in order to remove the child that is equal to that element value.
So now it's a little bit tricky, but that's the way to remove elements from your page.
So now we can try that out and we refresh, create one, drag it over and we see it disappears.
So that's exactly what we wanted to do.
We want it to have the ability to create a whole bunch of these elements and have them drivable so we
can move them around and then also have them a way to get rid of them.
So essentially, that's our trash bin and that's our way to get rid of elements.
So as soon as they're on top and we're moving them around, they're going to disappear.
So try that out as well.
Within your project, removing out an element from the page and removing out the element that you're
currently dragging once it collides with our other element, that is going to get rid of it.