1 00:00:00,000 --> 00:00:03,590 There will be a time when you need to select an element and 2 00:00:03,585 --> 00:00:08,705 all of its children elements need to be removed. 3 00:00:08,700 --> 00:00:12,480 And so we could write some fancy selector to select pretty much everything. 4 00:00:12,480 --> 00:00:15,120 So we could say, for example, selected div, 5 00:00:15,120 --> 00:00:19,010 and it's like everything inside that div dot remove. 6 00:00:19,005 --> 00:00:21,375 But there's a better way to do this. 7 00:00:21,530 --> 00:00:24,400 And so let's go ahead and set up an example here. 8 00:00:24,395 --> 00:00:27,275 We can say div, and this is going to be our parent element. 9 00:00:27,270 --> 00:00:33,220 So parent element, and this is an HTML comment here. Right there. 10 00:00:33,220 --> 00:00:38,560 Let's write a strong bolded word here. 11 00:00:38,555 --> 00:00:45,395 Italics, it, italicized word here. 12 00:00:45,850 --> 00:00:49,230 And let's also select 13 00:00:49,420 --> 00:00:53,830 or not select the Create a paragraph with some lorem ipsum in there. 14 00:00:53,825 --> 00:00:58,555 And so if we view our page, okay, no big deal. 15 00:00:58,550 --> 00:01:01,850 We still have this div. What if we wanted to select this div? 16 00:01:01,850 --> 00:01:05,140 And let's give this an ID of parent. 17 00:01:05,135 --> 00:01:10,015 What if we wanted to select this parent ID div and get rid of all this stuff in here. 18 00:01:10,010 --> 00:01:11,980 That's really, really easy to do. 19 00:01:11,975 --> 00:01:15,145 And let's actually make this a little bit more complicated. 20 00:01:15,140 --> 00:01:19,190 So first of all, let's start off with div, 21 00:01:19,190 --> 00:01:20,800 select the parent ID. 22 00:01:20,795 --> 00:01:23,005 And then we could just do dot empty. 23 00:01:23,000 --> 00:01:25,120 And what this is going to do is select that ID, 24 00:01:25,115 --> 00:01:28,835 select that div, and just get rid of everything inside of it. 25 00:01:28,835 --> 00:01:35,855 Now we can chain together dot HTML and we could say something like hello world. 26 00:01:37,030 --> 00:01:39,950 And that got rid of all of the elements 27 00:01:39,950 --> 00:01:42,440 inside of this div and replace it with hello world. 28 00:01:42,440 --> 00:01:44,600 Now if we look at our source code, 29 00:01:44,600 --> 00:01:47,180 all of our regular source code is still there. 30 00:01:47,180 --> 00:01:49,060 This is not going to change throughout this course. 31 00:01:49,055 --> 00:01:51,985 All of our source code is going to be exactly as we write it. 32 00:01:51,980 --> 00:01:55,330 Javascript will continue to overwrite it. 33 00:01:55,325 --> 00:02:00,965 So this is going to be exactly what we write and JavaScript is going to change it. 34 00:02:00,965 --> 00:02:03,505 So from here on out, I'm probably not going to show you 35 00:02:03,500 --> 00:02:06,430 the source code too often anymore just because, 36 00:02:06,425 --> 00:02:09,775 well, it's going to work the same way over and over and over again. 37 00:02:09,770 --> 00:02:15,440 Now, let's go ahead and sort of changes into proper JavaScript. 38 00:02:15,440 --> 00:02:17,290 So we could do const. 39 00:02:17,285 --> 00:02:20,905 Parent is equal two. And when you're writing jQuery and you 40 00:02:20,900 --> 00:02:23,890 see a dollar sign in front of a variable name. 41 00:02:23,885 --> 00:02:26,155 That usually means there's some sort of selector. 42 00:02:26,150 --> 00:02:28,980 And so we can go ahead and select this. 43 00:02:29,440 --> 00:02:33,110 And then if we wanted to, we could say parent.value 44 00:02:33,110 --> 00:02:40,140 empty or parents dot HTML stuff in here. 45 00:02:40,320 --> 00:02:43,300 And we're going to CSS stuff in here. 46 00:02:43,300 --> 00:02:47,290 Now, what's sort of interesting about this is sometimes you just need 47 00:02:47,290 --> 00:02:50,830 to empty out an element just for something else to load a little bit later. 48 00:02:50,830 --> 00:02:52,980 But if you need it to happen right away, 49 00:02:52,975 --> 00:02:55,255 we actually don't need to use empty whatsoever. 50 00:02:55,255 --> 00:02:58,875 We can select this entire parent element and we can overwrite 51 00:02:58,870 --> 00:03:02,940 the entire HTML with a sentence that says stuff in here, 52 00:03:02,935 --> 00:03:06,955 Stephan here, and there are no child elements. 53 00:03:06,955 --> 00:03:08,655 Now if you're just coming into the world of 54 00:03:08,650 --> 00:03:11,170 document object models and you're like what's apparent, what's a child? 55 00:03:11,170 --> 00:03:16,920 That's a good question. A parent element holds child elements. 56 00:03:16,915 --> 00:03:21,795 A child element is inside of a parent element. 57 00:03:21,790 --> 00:03:24,850 That's all it is. So let's go ahead and give this example, 58 00:03:24,845 --> 00:03:28,015 a shot here, a little preview. 59 00:03:28,010 --> 00:03:29,600 And we're going to see in here, 60 00:03:29,600 --> 00:03:31,550 we have actually overwritten all of it, 61 00:03:31,550 --> 00:03:33,730 so we didn't have to use dot empty. 62 00:03:33,725 --> 00:03:38,225 We're really comes in is if you have 63 00:03:38,225 --> 00:03:43,115 some processing to do or if you need to fetch data from like an API, 64 00:03:43,115 --> 00:03:46,925 you could parent dot empty. 65 00:03:46,925 --> 00:03:50,065 Let's delete that parent dot empty. 66 00:03:50,060 --> 00:03:54,940 And then do a thing so you can fetch some information from an API somewhere. 67 00:03:54,935 --> 00:03:57,835 And maybe that takes three seconds. 68 00:03:57,830 --> 00:04:03,370 And then you can say parent dot HTML and put some new HTML in there. 69 00:04:03,365 --> 00:04:07,435 In the next lesson, let's start talking about event listeners, 70 00:04:07,430 --> 00:04:12,810 event listener syntax and how we can make something trigger when we click it.