1
00:00:00,090 --> 00:00:07,260
In the earlier lessons, we saw how we can clone elements and we also saw how we can select them, apply,

2
00:00:07,260 --> 00:00:11,850
update their properties, their style, update their positions, make them dragonball.

3
00:00:12,030 --> 00:00:15,630
So a whole bunch of really cool things that we've done in the earlier lessons.

4
00:00:15,840 --> 00:00:19,950
And last but not least, we need a way to get rid of our elements.

5
00:00:20,160 --> 00:00:27,210
So now that we've moved it over our trash bin, which is this block square over here, we want to remove

6
00:00:27,210 --> 00:00:28,040
that element.

7
00:00:28,350 --> 00:00:35,640
So opening up our Ed and we already have the condition in place, checking to see if we're on top.

8
00:00:35,640 --> 00:00:39,170
And if we are, then we can run a block of code.

9
00:00:39,750 --> 00:00:41,610
So that's already ready for us.

10
00:00:41,610 --> 00:00:42,660
And that is Cleide.

11
00:00:43,470 --> 00:00:44,910
We can get rid of the Al statement.

12
00:00:44,910 --> 00:00:46,110
We don't need that anymore.

13
00:00:47,310 --> 00:00:53,670
So if it is colliding, if it is on top, then we're going to select that element and we're going to

14
00:00:53,670 --> 00:00:57,470
get rid of the on most down and we're going to set it to null.

15
00:00:57,480 --> 00:00:59,360
So that's not going to be active anymore.

16
00:00:59,910 --> 00:01:02,880
And we're also going to select that element.

17
00:01:03,270 --> 00:01:09,000
And this is where things get a little bit tricky because we have to traverse up to the parent element

18
00:01:09,420 --> 00:01:17,990
and then remove the child element that has the properties, the value of that element.

19
00:01:18,360 --> 00:01:25,290
So you have to go up to the parent in order to remove the child that is equal to that element value.

20
00:01:26,070 --> 00:01:30,130
So now it's a little bit tricky, but that's the way to remove elements from your page.

21
00:01:30,420 --> 00:01:37,280
So now we can try that out and we refresh, create one, drag it over and we see it disappears.

22
00:01:38,220 --> 00:01:40,080
So that's exactly what we wanted to do.

23
00:01:40,320 --> 00:01:44,880
We want it to have the ability to create a whole bunch of these elements and have them drivable so we

24
00:01:44,880 --> 00:01:49,120
can move them around and then also have them a way to get rid of them.

25
00:01:49,530 --> 00:01:53,870
So essentially, that's our trash bin and that's our way to get rid of elements.

26
00:01:53,880 --> 00:01:57,800
So as soon as they're on top and we're moving them around, they're going to disappear.

27
00:01:58,560 --> 00:02:00,300
So try that out as well.

28
00:02:00,300 --> 00:02:06,900
Within your project, removing out an element from the page and removing out the element that you're

29
00:02:06,900 --> 00:02:12,300
currently dragging once it collides with our other element, that is going to get rid of it.