1 00:00:00,600 --> 00:00:06,150 This lesson we're going to be looking at Naude remove child method, which removes a child node from 2 00:00:06,150 --> 00:00:11,970 the dorm and returns the remote removed node, so it actually returns the removed node. 3 00:00:12,120 --> 00:00:17,080 So it's set up and go into our HTML code and we're going to create some device. 4 00:00:17,100 --> 00:00:21,510 So first of that, we're going to create is going to be the parent or this is going to be whatever the 5 00:00:21,510 --> 00:00:24,960 top div is and then went in the top div. 6 00:00:24,960 --> 00:00:33,150 We're going to have a nested div as well and give that one a class of nested and we can create a few 7 00:00:33,150 --> 00:00:33,720 of these. 8 00:00:33,720 --> 00:00:36,990 So we'll have nested one, two and three. 9 00:00:36,990 --> 00:00:40,630 So we'll have a few different nested elements on the page. 10 00:00:41,100 --> 00:00:45,570 So the objective is to use JavaScript and remove them from the page. 11 00:00:45,960 --> 00:00:48,780 Let's apply some JavaScript and remove the elements. 12 00:00:49,080 --> 00:00:52,470 So first, let's make a selection of the element that we want to remove. 13 00:00:52,500 --> 00:00:58,860 So this is going to be the top element that we want to remove and selecting it, using the document 14 00:00:58,860 --> 00:01:06,210 object and using query selector, we're going to select the element with a class of top so as to indicate 15 00:01:06,210 --> 00:01:08,040 that with a dot and top. 16 00:01:08,280 --> 00:01:13,260 So that will select that element for us within that object so that we can use that. 17 00:01:13,500 --> 00:01:16,300 And then also let's select the nested elements. 18 00:01:16,350 --> 00:01:23,530 So we'll just call this the next one and again, using the document and query selector and we just always 19 00:01:23,580 --> 00:01:24,710 select the first one. 20 00:01:25,110 --> 00:01:27,840 So select whatever one is nested. 21 00:01:30,960 --> 00:01:40,290 And now let's remove the child, so let's remove elements and select that element that we want to remove 22 00:01:40,620 --> 00:01:42,960 and we need to select the parent. 23 00:01:42,960 --> 00:01:48,860 So using the parent element object and using the remove child method. 24 00:01:49,140 --> 00:01:54,390 So it's going to remove the child node from the dorm and it also returns the removed child. 25 00:01:54,690 --> 00:01:58,250 And then we need to specify which element we want to remove. 26 00:01:58,560 --> 00:02:04,590 And now if we cancel log the removed element, we've got the element object there. 27 00:02:04,830 --> 00:02:10,900 And then let's also try to console log the existing element so that one that we just removed. 28 00:02:11,280 --> 00:02:14,640 So what do you think is going to get returned back in the first console? 29 00:02:14,640 --> 00:02:17,970 And what do you think is going to be a return back in the second console message? 30 00:02:18,270 --> 00:02:20,270 Let's check it out and see what happens. 31 00:02:20,520 --> 00:02:29,290 So we still have the removed element that's selected into this is the return of the removed element. 32 00:02:29,310 --> 00:02:32,610 So on the callback, it gives us the element that was removed. 33 00:02:32,760 --> 00:02:38,880 And then we also still have that element sitting within the object because we've defined the object 34 00:02:38,910 --> 00:02:39,600 as. 35 00:02:40,970 --> 00:02:47,150 So we've got our main element, which is the top element, and then we have the next one, which is 36 00:02:47,150 --> 00:02:52,700 still referencing that same memory location where the nested object was sitting. 37 00:02:53,180 --> 00:02:59,050 So we can also remove that element by removing out so we don't have to specify the parent. 38 00:02:59,390 --> 00:03:01,440 We can remove the element itself. 39 00:03:01,700 --> 00:03:08,560 So let's do that for next to where we're going to use the documents and query selector. 40 00:03:08,780 --> 00:03:13,660 And this time we're going to do a query selector, all because we want to select the second element. 41 00:03:13,970 --> 00:03:21,050 So we need to select all of the elements in node list and then specify which elements we want to work 42 00:03:21,050 --> 00:03:21,290 with. 43 00:03:21,560 --> 00:03:26,210 So we're using Nesto and we're getting all of the nested elements. 44 00:03:28,510 --> 00:03:38,000 And if you console log next to that's going to return back all of the elements that are nested. 45 00:03:38,320 --> 00:03:44,140 So we've got a node list and currently we still have the two that are available in there because we 46 00:03:44,140 --> 00:03:47,500 have removed out the one that's there. 47 00:03:47,500 --> 00:03:49,770 So we've removed out that first one there. 48 00:03:50,290 --> 00:03:57,940 So if we were to actually to change the order of the code, we should still have all three elements 49 00:03:57,940 --> 00:04:02,380 that are listed out when we do the slight query selector all. 50 00:04:03,630 --> 00:04:08,640 And we've got the naughty list of three elements, so that also includes the memory location reference 51 00:04:08,640 --> 00:04:11,910 to nested one so that one is still within our node list. 52 00:04:12,240 --> 00:04:18,960 And that way, whenever we do the remove, we can still reference it by the order that we're seeing 53 00:04:18,960 --> 00:04:19,700 it on the page. 54 00:04:20,040 --> 00:04:27,550 So using Nest with an index value of one, this is going to reference that second one. 55 00:04:27,720 --> 00:04:29,970 So with the value of nested too. 56 00:04:30,270 --> 00:04:34,680 So let's go ahead and we're going to remove this one and this time we're going to remove it without 57 00:04:35,100 --> 00:04:37,250 having to specify the parent node. 58 00:04:37,650 --> 00:04:44,990 So we've made the selection and first we want to check to make sure that the node actually exists. 59 00:04:45,780 --> 00:04:54,940 So let's select next to with an index of one and selecting whatever the parent node is. 60 00:04:55,410 --> 00:04:59,380 So this is going to return back the parent of the specified node tree. 61 00:04:59,730 --> 00:05:02,660 So we're going to see if it actually exists. 62 00:05:02,940 --> 00:05:09,660 And before we do that, we'll log that out into the console so that we can see that it exists and before 63 00:05:09,660 --> 00:05:11,470 we actually check to see if it exists. 64 00:05:11,760 --> 00:05:20,400 So if it exists or if this element does have a parent node, then we can use that parent node and navigate 65 00:05:20,400 --> 00:05:22,120 to the element that we want to remove. 66 00:05:22,380 --> 00:05:25,680 So similar to what we just did here when we did the removed child. 67 00:05:25,860 --> 00:05:31,230 But this way we don't have to make a selection of that parent element as we're just going to use whatever 68 00:05:31,230 --> 00:05:32,700 one we're referencing. 69 00:05:32,850 --> 00:05:38,570 And then we also have the node that we're referencing here, and that's to index value one. 70 00:05:38,820 --> 00:05:41,670 So this way, this will give us the ability to remove that one. 71 00:05:42,240 --> 00:05:47,610 So now we've removed out nested two as well and it gets returned back. 72 00:05:48,120 --> 00:05:53,580 So within that parent that we're returning back, we see that we've got nested three because this is 73 00:05:53,580 --> 00:06:00,240 referencing that parent object and nested two is the one that got removed, nested one also got removed 74 00:06:00,330 --> 00:06:03,490 and then nested is the one that we're still out putting into the console. 75 00:06:03,510 --> 00:06:08,670 So let me actually move this, change the order and move that around. 76 00:06:09,030 --> 00:06:14,360 So also, if we want to remove all children from an element, we can do that as well. 77 00:06:14,700 --> 00:06:20,790 So if we wanted to save ourselves some time, instead of selecting each one individually, we can remove 78 00:06:20,790 --> 00:06:25,810 all of them and we need to specify only need to make a selection of the parent. 79 00:06:26,130 --> 00:06:32,880 So what I'll do is I'm going to comment all of this out and toggle a block comment so that that code 80 00:06:32,880 --> 00:06:36,020 is not going to be running and we're going to make a selection of the parent. 81 00:06:36,210 --> 00:06:39,570 And what we want to do is remove out all the child elements. 82 00:06:39,900 --> 00:06:44,640 So we're going to select the while and then using Taupo. 83 00:06:46,220 --> 00:06:53,840 And while it has a first child, so while that exists, we can continue to loop through and we do need 84 00:06:53,840 --> 00:07:00,170 a way out of this loop, and that means that once we run out of children within the. 85 00:07:02,570 --> 00:07:08,870 Topple within that selection, then we're not going to have any more children to remove and we're going 86 00:07:08,870 --> 00:07:15,890 to break the loop, so let's make a selection of this element so thoughtful. 87 00:07:16,100 --> 00:07:23,930 So just as we saw before, and then use the remove child method and then we're selecting the element, 88 00:07:24,170 --> 00:07:33,980 the parent element and using the first child to navigate and return back that first child and so removed 89 00:07:33,980 --> 00:07:34,610 element. 90 00:07:34,610 --> 00:07:35,990 Assign a value to that. 91 00:07:36,450 --> 00:07:45,560 And what I'll do is I'll console like the removed element and let's also push it into an array. 92 00:07:45,680 --> 00:07:48,380 So it created an array, just a blank array. 93 00:07:48,880 --> 00:07:49,660 That's an object. 94 00:07:49,670 --> 00:07:50,540 Let's create an array. 95 00:07:50,840 --> 00:07:57,500 And what we can do is we can take that tree and push into the array. 96 00:07:57,800 --> 00:08:00,380 Whatever that removed element was would be. 97 00:08:00,800 --> 00:08:08,930 So after we finished while loop, we can console log the value of temp, which is going to be the array 98 00:08:08,930 --> 00:08:10,840 that's holding all of the removed elements. 99 00:08:11,090 --> 00:08:11,980 So let's see what happens. 100 00:08:11,990 --> 00:08:19,190 So we loop through and we remove all of the elements from the page and from that parent elements. 101 00:08:19,190 --> 00:08:23,060 And we see that we've also removed out the children here. 102 00:08:23,060 --> 00:08:25,100 So we've removed the text separately. 103 00:08:25,370 --> 00:08:30,860 So we've actually removed at six children from that parent element. 104 00:08:31,070 --> 00:08:35,630 And one of them was the text and then the next was the div. 105 00:08:35,840 --> 00:08:39,530 And then we had the text because we are removing out nodes. 106 00:08:39,530 --> 00:08:41,120 So it's not referring to the elements. 107 00:08:41,360 --> 00:08:45,230 So this is a little bit misleading, but we are removing out the nodes. 108 00:08:45,230 --> 00:08:50,720 So actually this should be removed node as it's referencing the node. 109 00:08:51,920 --> 00:08:58,250 That was removed from the page and not the entire element that we were removing, and that's how you 110 00:08:58,250 --> 00:09:02,230 can use that remove child to remove out elements from the page. 111 00:09:02,840 --> 00:09:03,950 So God tried it.