WEBVTT 1 00:00:01.298 --> 00:00:03.170 In this lecture we're gonna learn 2 00:00:03.170 --> 00:00:08.170 how to select, create and delete elements with JavaScript. 3 00:00:08.710 --> 00:00:11.580 Now, the goal of this lecture is more to be 4 00:00:11.580 --> 00:00:14.530 like a quick reference for you in the future 5 00:00:14.530 --> 00:00:17.310 because these methods that I'm gonna show you here 6 00:00:17.310 --> 00:00:20.320 are actually way more difficult to find 7 00:00:20.320 --> 00:00:24.150 and to understand from the MDN documentation. 8 00:00:24.150 --> 00:00:27.250 And so when you need some of these methods in the future 9 00:00:27.250 --> 00:00:29.400 then all you have to do is to come back 10 00:00:29.400 --> 00:00:31.923 to this lecture and see how it works. 11 00:00:33.860 --> 00:00:35.920 And let's start by learning a little bit more 12 00:00:35.920 --> 00:00:37.940 about selecting elements. 13 00:00:37.940 --> 00:00:42.123 And I'm gonna start at the very top of any HTML document. 14 00:00:43.290 --> 00:00:45.950 So as you know, that is the document. 15 00:00:45.950 --> 00:00:49.480 And so actually we do have a special way of selecting 16 00:00:49.480 --> 00:00:54.100 the entire document of well, of any webpage, 17 00:00:54.100 --> 00:00:59.100 so of any document and that's document element, all right. 18 00:01:00.360 --> 00:01:03.210 So just document here is not enough 19 00:01:03.210 --> 00:01:05.900 to select the document element 20 00:01:05.900 --> 00:01:10.450 because this is not the real DOM element, all right? 21 00:01:10.450 --> 00:01:13.740 So for example if we want to apply CSS styles 22 00:01:13.740 --> 00:01:15.850 to the entire page we always need 23 00:01:15.850 --> 00:01:20.850 to select document element, okay? 24 00:01:20.850 --> 00:01:23.363 Let's just take a look here in the console. 25 00:01:24.640 --> 00:01:29.640 And so indeed that is now the entire HTML here, okay? 26 00:01:29.840 --> 00:01:33.793 And we can also easily select the head and body. 27 00:01:34.810 --> 00:01:39.683 So that's just head and dot body as you can imagine. 28 00:01:41.600 --> 00:01:44.260 So this is not visible on the page 29 00:01:44.260 --> 00:01:48.330 and the body is then also the entire kind 30 00:01:48.330 --> 00:01:51.640 of visible document, all right? 31 00:01:51.640 --> 00:01:53.530 So for these special elements 32 00:01:53.530 --> 00:01:56.230 we don't even need to write any selector 33 00:01:56.230 --> 00:01:59.070 but otherwise as you already know, 34 00:01:59.070 --> 00:02:01.023 we can use query selector. 35 00:02:02.600 --> 00:02:03.700 So that's nothing new, 36 00:02:04.930 --> 00:02:09.280 for example we can select the header element just like this 37 00:02:09.280 --> 00:02:11.600 and this will then return the first element 38 00:02:11.600 --> 00:02:14.423 that matches this selector here. 39 00:02:15.760 --> 00:02:18.280 Now, if we want to select multiple elements 40 00:02:18.280 --> 00:02:21.510 then we should use document.queryselectorAll. 41 00:02:24.460 --> 00:02:26.610 So again, we already used this one 42 00:02:29.170 --> 00:02:30.840 and so here on this page 43 00:02:30.840 --> 00:02:33.453 we have multiple elements with these section class. 44 00:02:34.710 --> 00:02:38.120 So basically each of these here are a section 45 00:02:39.370 --> 00:02:41.323 with the class of section, okay? 46 00:02:43.570 --> 00:02:46.830 And I will actually store this here in a variable 47 00:02:46.830 --> 00:02:50.210 because I want to show you something 48 00:02:50.210 --> 00:02:51.703 a little bit later, okay? 49 00:02:56.850 --> 00:03:00.740 But as you know already, this will return a node list 50 00:03:00.740 --> 00:03:03.040 and then that will contain all of the elements 51 00:03:04.340 --> 00:03:09.340 that are a section so that are selected by this selector. 52 00:03:10.150 --> 00:03:13.040 So these ones we have been using all the time. 53 00:03:13.040 --> 00:03:15.920 And in fact they are the most used ways 54 00:03:15.920 --> 00:03:17.700 of selecting elements. 55 00:03:17.700 --> 00:03:21.270 Now, as you learned hopefully from the previous lecture 56 00:03:21.270 --> 00:03:24.890 these are available not only on the document here 57 00:03:24.890 --> 00:03:29.890 like this, but also on all the elements, okay? 58 00:03:30.020 --> 00:03:32.220 And we actually use this a lot when we want 59 00:03:32.220 --> 00:03:34.730 to select child elements as we will do 60 00:03:34.730 --> 00:03:38.300 a little bit later in this section, okay? 61 00:03:38.300 --> 00:03:41.700 Next I think we also already talked 62 00:03:41.700 --> 00:03:45.190 about get element by ID. 63 00:03:45.190 --> 00:03:50.190 And so here we only pass the ID name itself 64 00:03:50.350 --> 00:03:51.833 without the selector. 65 00:03:52.880 --> 00:03:55.880 So this section here has ID section one 66 00:03:56.810 --> 00:04:00.410 and so, yeah, we don't need the selector here. 67 00:04:00.410 --> 00:04:04.530 That's only for the query selector methods, all right. 68 00:04:04.530 --> 00:04:05.710 So I showed you this one 69 00:04:05.710 --> 00:04:08.730 because now there are also some others. 70 00:04:08.730 --> 00:04:13.730 So there are get elements and get elements, 71 00:04:14.270 --> 00:04:19.270 so with an S by tag name. 72 00:04:22.050 --> 00:04:24.940 And so let's say we want to get all the buttons. 73 00:04:24.940 --> 00:04:28.173 So all the elements with the name of button basically. 74 00:04:29.550 --> 00:04:34.550 So that's actually store this also all buttons 75 00:04:35.330 --> 00:04:37.143 and then log it to the console. 76 00:04:41.060 --> 00:04:42.810 Let's give it some more space here. 77 00:04:43.740 --> 00:04:46.130 And so here now you see all the buttons 78 00:04:46.130 --> 00:04:48.440 that are on our page. 79 00:04:48.440 --> 00:04:50.040 Now, what I wanted to show you is 80 00:04:50.040 --> 00:04:54.190 that this method actually returns an HTML collection. 81 00:04:54.190 --> 00:04:56.800 So that's different from a node list 82 00:04:56.800 --> 00:05:00.080 because an HTML collection is actually 83 00:05:00.080 --> 00:05:02.580 a so-called life collection. 84 00:05:02.580 --> 00:05:06.110 And that means that if the DOM changes then this collection 85 00:05:06.110 --> 00:05:09.760 is also immediately updated automatically. 86 00:05:09.760 --> 00:05:12.950 So for example, if I remove this button here 87 00:05:13.790 --> 00:05:16.660 and I can do that by clicking inspect 88 00:05:16.660 --> 00:05:19.330 and then that will select that button here 89 00:05:19.330 --> 00:05:22.340 then all I need to do is to hit delete 90 00:05:23.440 --> 00:05:27.130 and then if I go back here to the console 91 00:05:27.130 --> 00:05:30.080 and try to read the allButtons again 92 00:05:31.090 --> 00:05:34.090 then you see that we only have eight elements in here 93 00:05:35.060 --> 00:05:39.310 while before we had nine, right? 94 00:05:39.310 --> 00:05:41.890 So that's something very important to keep in mind 95 00:05:41.890 --> 00:05:45.310 when you use this selector here, okay? 96 00:05:45.310 --> 00:05:47.830 And sometimes it's actually quite helpful 97 00:05:47.830 --> 00:05:50.600 to have an HTML collection like this 98 00:05:50.600 --> 00:05:52.690 which updates automatically 99 00:05:52.690 --> 00:05:55.070 because of course we can also delete elements 100 00:05:55.070 --> 00:05:58.940 from the DOM programmatically not just manually 101 00:05:58.940 --> 00:06:03.200 like I just deleted this button here earlier, all right. 102 00:06:03.200 --> 00:06:07.080 Now the same does not happen with a node list. 103 00:06:07.080 --> 00:06:12.080 So if I take this whole section here and delete it 104 00:06:13.730 --> 00:06:18.380 and if I then try to read all the sections 105 00:06:18.380 --> 00:06:21.740 then I still have the same four elements here 106 00:06:21.740 --> 00:06:23.310 in the node list. 107 00:06:23.310 --> 00:06:26.470 And that's because this variable here was created 108 00:06:26.470 --> 00:06:29.550 by the time that this section still existed. 109 00:06:29.550 --> 00:06:31.370 And it didn't update itself 110 00:06:31.370 --> 00:06:35.240 as I deleted one of its elements, all right? 111 00:06:35.240 --> 00:06:38.423 So again, that's important to keep in mind, okay? 112 00:06:41.440 --> 00:06:43.760 And finally I also want to show you 113 00:06:43.760 --> 00:06:48.760 get elements by class name. 114 00:06:50.090 --> 00:06:53.510 So this is similar again to get element by ID 115 00:06:53.510 --> 00:06:55.283 and get elements by tag name. 116 00:06:56.290 --> 00:06:58.853 So here we can now specify a class name. 117 00:06:59.950 --> 00:07:02.310 So let's say button and once again 118 00:07:02.310 --> 00:07:04.070 we don't need a selector. 119 00:07:04.070 --> 00:07:08.200 So it's not a dot, it's simply the name of the classes. 120 00:07:08.200 --> 00:07:11.750 And this one will also return a life HTML collection. 121 00:07:11.750 --> 00:07:16.750 So just as I explained to you earlier, okay. 122 00:07:17.220 --> 00:07:21.160 So this is how we select elements, 123 00:07:21.160 --> 00:07:25.030 selecting elements once of these, you already knew. 124 00:07:25.030 --> 00:07:27.810 So basically these two more modern ones 125 00:07:27.810 --> 00:07:29.830 but these ones also have a place. 126 00:07:29.830 --> 00:07:33.020 So this one and this one in case that you really need 127 00:07:33.020 --> 00:07:37.340 an HTML collection which in some situations is useful 128 00:07:37.340 --> 00:07:41.820 but most of the time, I simply keep using query selector 129 00:07:41.820 --> 00:07:45.173 and query selector all, okay. 130 00:07:46.040 --> 00:07:51.040 Next up, let's talk about creating and inserting elements. 131 00:07:52.750 --> 00:07:55.640 Now we can create HTML elements using 132 00:07:55.640 --> 00:07:58.430 the insert adjacent HTML function 133 00:07:58.430 --> 00:08:03.280 that we used before and the Bankist application remember. 134 00:08:03.280 --> 00:08:08.280 So we used insert adjacent HTML to create movements, right? 135 00:08:13.630 --> 00:08:17.170 And this is a quick and easy way of creating elements 136 00:08:17.170 --> 00:08:21.470 that I really like a lot and use the most actually. 137 00:08:21.470 --> 00:08:24.470 So please go back to the Bankist application 138 00:08:24.470 --> 00:08:28.210 and remember exactly how it works now, right? 139 00:08:28.210 --> 00:08:31.090 So I don't need to talk about this one here again 140 00:08:31.090 --> 00:08:32.430 and I will instead focus 141 00:08:32.430 --> 00:08:35.230 on some other ways of creating elements 142 00:08:35.230 --> 00:08:37.720 because sometimes it's more useful 143 00:08:37.720 --> 00:08:40.430 to actually build the element a bit more 144 00:08:40.430 --> 00:08:43.940 from scratch, like more programmatically using 145 00:08:43.940 --> 00:08:47.360 a combination of some other methods. 146 00:08:47.360 --> 00:08:51.723 So let's see how and then it will all make sense, okay? 147 00:08:53.980 --> 00:08:57.340 So let's use document.createElement, okay? 148 00:09:01.000 --> 00:09:02.360 And then here we need to pass 149 00:09:02.360 --> 00:09:06.270 in the string of basically the tag name. 150 00:09:06.270 --> 00:09:09.060 So I want to create a div here now. 151 00:09:09.060 --> 00:09:11.730 And so this will return a DOM element 152 00:09:11.730 --> 00:09:13.853 that we can then save somewhere. 153 00:09:14.830 --> 00:09:17.120 And I'm calling this one message 154 00:09:17.120 --> 00:09:22.120 and I will explain why in a second, okay? 155 00:09:22.290 --> 00:09:25.520 So again, this here creates a DOM element 156 00:09:25.520 --> 00:09:29.430 and then stores that element into the message. 157 00:09:29.430 --> 00:09:32.874 Now that element is not yet anywhere in our DOM. 158 00:09:32.874 --> 00:09:36.200 All this is is a DOM object that we can now use 159 00:09:36.200 --> 00:09:40.550 to do something on it but it is not yet in the DOM itself. 160 00:09:40.550 --> 00:09:45.550 So it's nowhere to be found on our webpage here, okay? 161 00:09:45.580 --> 00:09:47.720 If we want it on the page then we need 162 00:09:47.720 --> 00:09:50.600 to manually insert it into the page. 163 00:09:50.600 --> 00:09:54.440 But first let's actually do something with it. 164 00:09:54.440 --> 00:09:57.483 So for example, we can add classes. 165 00:09:58.400 --> 00:10:01.330 And so now this is like any other selection 166 00:10:01.330 --> 00:10:03.520 that we have, okay? 167 00:10:03.520 --> 00:10:07.340 So if we have an element in our DOM and select it 168 00:10:07.340 --> 00:10:11.650 for example, using query selector here like this 169 00:10:11.650 --> 00:10:14.040 then the result is also a DOM object 170 00:10:14.040 --> 00:10:15.980 that we can use in our code. 171 00:10:15.980 --> 00:10:18.243 And this year is now just the same. 172 00:10:19.420 --> 00:10:22.990 It's just an object that represents a DOM element. 173 00:10:22.990 --> 00:10:26.030 And so just like before we can use, for example 174 00:10:26.030 --> 00:10:31.030 class list on it, so class list, and then we can add 175 00:10:32.760 --> 00:10:37.760 and I will add a class called cookie message. 176 00:10:38.830 --> 00:10:41.590 And that's because here we will now programmatically 177 00:10:41.590 --> 00:10:45.660 built an element which will display a small cookie message 178 00:10:45.660 --> 00:10:47.430 on the bottom of the screen. 179 00:10:47.430 --> 00:10:51.670 So I'm sure you've seen these on all web pages these days. 180 00:10:51.670 --> 00:10:52.963 They're quite annoying. 181 00:10:54.790 --> 00:10:59.510 So let me search here for cookie and here you go. 182 00:10:59.510 --> 00:11:03.560 So this is the class that I created for this cookie message. 183 00:11:03.560 --> 00:11:06.020 And so this is the one we are adding now 184 00:11:06.020 --> 00:11:10.303 to our newly created element, okay? 185 00:11:11.260 --> 00:11:15.143 Let's get rid of this here and now we can keep going. 186 00:11:16.790 --> 00:11:21.660 So for example, we can add text into the element 187 00:11:21.660 --> 00:11:25.233 and as always we do that using text content. 188 00:11:26.150 --> 00:11:31.150 So let's just say we use cookies for improved functionality 189 00:11:34.840 --> 00:11:39.840 and analytics, something like that, analytics, okay? 190 00:11:41.360 --> 00:11:43.826 So this inserts simply text 191 00:11:43.826 --> 00:11:47.323 but of course we can also insert a HTML. 192 00:11:48.380 --> 00:11:51.740 And so that is then inner HTML 193 00:11:51.740 --> 00:11:54.520 which we also already used before. 194 00:11:54.520 --> 00:11:58.110 And remember that we can use both of these properties 195 00:11:58.110 --> 00:12:02.840 to read and to set content, okay? 196 00:12:02.840 --> 00:12:06.390 And so here let's not write a string of HTML 197 00:12:07.480 --> 00:12:11.763 so let's copy this and then we can also like add a button. 198 00:12:14.180 --> 00:12:17.513 Okay, I'm missing the colon here. 199 00:12:18.892 --> 00:12:20.913 So let's add a button element. 200 00:12:27.600 --> 00:12:30.500 Okay, so I'm just writing some HTML here. 201 00:12:30.500 --> 00:12:33.903 This doesn't matter, just copy this code. 202 00:12:34.950 --> 00:12:37.312 All right, It's just that it will have 203 00:12:37.312 --> 00:12:39.440 the correct formatting then based 204 00:12:39.440 --> 00:12:41.483 on the CSS that I wrote before. 205 00:12:43.620 --> 00:12:45.870 So this will basically just display 206 00:12:45.870 --> 00:12:49.523 a nicely formatted button saying, got it, okay? 207 00:12:51.960 --> 00:12:54.720 But anyway we now have this element 208 00:12:54.720 --> 00:12:59.210 and all we have to do now is to insert it into our DOM. 209 00:12:59.210 --> 00:13:01.373 And let's do that here in our header. 210 00:13:03.150 --> 00:13:06.090 So give it some more space. 211 00:13:06.090 --> 00:13:08.283 So all of this year is our header element. 212 00:13:10.510 --> 00:13:14.333 So this takes up so much space. 213 00:13:15.370 --> 00:13:17.170 Can't get rid of it for some reason. 214 00:13:18.060 --> 00:13:20.240 So all of this is our header. 215 00:13:20.240 --> 00:13:22.090 And so we cannot select this header 216 00:13:22.090 --> 00:13:25.223 and then a pent or message to that element. 217 00:13:26.324 --> 00:13:29.977 And we already have that here, let's call this the header 218 00:13:32.253 --> 00:13:37.253 and now we can say header.prepend. 219 00:13:40.240 --> 00:13:43.360 And now indeed, here it is. 220 00:13:43.360 --> 00:13:46.190 So here is our message. 221 00:13:46.190 --> 00:13:48.423 So maybe you saw it being added here. 222 00:13:49.530 --> 00:13:53.780 So indeed is now also really in our DOM. 223 00:13:53.780 --> 00:13:57.603 Now, for some reason, I think this doesn't look quite right. 224 00:13:59.450 --> 00:14:00.563 Well, maybe it does. 225 00:14:03.120 --> 00:14:05.530 So what matters here is that we just inserted 226 00:14:05.530 --> 00:14:10.530 this element really into our HTML, so right into our DOM. 227 00:14:11.370 --> 00:14:13.840 So prepending basically adds the element 228 00:14:13.840 --> 00:14:18.640 as the first child of this element, okay? 229 00:14:18.640 --> 00:14:21.840 But we can also edit as the last child. 230 00:14:21.840 --> 00:14:24.614 And so that is a append. 231 00:14:24.614 --> 00:14:29.614 So header.append message and watch what happens now? 232 00:14:33.350 --> 00:14:36.040 So now we see that it's really appended, 233 00:14:36.040 --> 00:14:37.583 so it's the last child. 234 00:14:38.730 --> 00:14:40.943 So it's gotta be, yeah, it's here. 235 00:14:42.890 --> 00:14:45.470 Now what we see here is that the element 236 00:14:45.470 --> 00:14:48.520 was actually only insert at once, 237 00:14:48.520 --> 00:14:51.210 now that's because this element here 238 00:14:51.210 --> 00:14:56.030 so message is now indeed a life element living in the DOM. 239 00:14:56.030 --> 00:14:58.180 And so therefore it cannot be 240 00:14:58.180 --> 00:15:01.200 at multiple places at the same time. 241 00:15:01.200 --> 00:15:04.580 It's just like a person that also cannot be 242 00:15:04.580 --> 00:15:07.470 at two places simultaneously, right? 243 00:15:07.470 --> 00:15:10.620 So what's happened here is that we first prepended 244 00:15:10.620 --> 00:15:13.800 the element and then we appended it. 245 00:15:13.800 --> 00:15:15.630 And what this appends did here 246 00:15:15.630 --> 00:15:17.670 was to basically move the element 247 00:15:17.670 --> 00:15:21.310 from being the first child to being the last child. 248 00:15:21.310 --> 00:15:24.700 All right, so basically it moved the element 249 00:15:24.700 --> 00:15:26.320 and didn't really insert it 250 00:15:26.320 --> 00:15:30.410 because it was already inserted here by prepend 251 00:15:30.410 --> 00:15:32.750 So what this means is that we can use 252 00:15:32.750 --> 00:15:37.330 the prepend and append methods not only to insert elements 253 00:15:37.330 --> 00:15:39.312 but also to move them. 254 00:15:39.312 --> 00:15:44.120 And again, that is because a DOM element is unique. 255 00:15:44.120 --> 00:15:48.160 So it can always only exist at one place at a time. 256 00:15:48.160 --> 00:15:50.540 But now what if we actually wanted 257 00:15:50.540 --> 00:15:54.370 to insert multiple copies of the same element? 258 00:15:54.370 --> 00:15:56.950 Well, in that case we actually would have 259 00:15:56.950 --> 00:15:59.850 to first copy the first element. 260 00:15:59.850 --> 00:16:04.523 So let's comment out this part here and say header.append 261 00:16:06.660 --> 00:16:10.050 and then instead of appending the message directly 262 00:16:10.050 --> 00:16:12.020 we first clone it. 263 00:16:12.020 --> 00:16:15.640 So that's clone node, and then we need to pass 264 00:16:15.640 --> 00:16:19.890 in true or we can pass in true which simply means 265 00:16:19.890 --> 00:16:23.370 that all the child elements will also be copied. 266 00:16:23.370 --> 00:16:27.130 And so now as you see, we get the same cookie message 267 00:16:27.130 --> 00:16:32.130 in both places, but usually this is not what we want. 268 00:16:32.670 --> 00:16:34.603 So let's actually only append it. 269 00:16:35.520 --> 00:16:37.410 So having it here at the bottom 270 00:16:37.410 --> 00:16:39.193 where it makes the most sense. 271 00:16:40.870 --> 00:16:45.190 Now, to finish there are actually two more methods 272 00:16:45.190 --> 00:16:50.190 and that is before and after. 273 00:16:51.840 --> 00:16:55.260 And as the name says this one will insert a message 274 00:16:55.260 --> 00:16:57.100 before to header element. 275 00:16:57.100 --> 00:16:59.410 So as a sibling and this one here 276 00:16:59.410 --> 00:17:03.173 after the header element, so also as a sibling. 277 00:17:04.960 --> 00:17:08.373 Let's just get rid of this so we can see it here before. 278 00:17:09.310 --> 00:17:13.420 And so now it's actually really before the header, 279 00:17:13.420 --> 00:17:14.940 so first a cookie message 280 00:17:14.940 --> 00:17:17.523 and then the header, but they are siblings. 281 00:17:19.920 --> 00:17:24.010 And now the same here, it's now after the header. 282 00:17:24.010 --> 00:17:24.843 So you have the whole header 283 00:17:24.843 --> 00:17:29.820 and then we have this cookie element, all right? 284 00:17:31.150 --> 00:17:32.510 So that is how we create 285 00:17:32.510 --> 00:17:35.190 and insert elements, programmatically 286 00:17:35.190 --> 00:17:40.190 and now to finish, let's also delete elements, okay? 287 00:17:42.020 --> 00:17:45.554 So what I'm gonna do is to remove this element 288 00:17:45.554 --> 00:17:47.970 when we click this button, 289 00:17:47.970 --> 00:17:50.110 so let's select this button 290 00:17:50.110 --> 00:17:52.943 and then as we click it, remove the message. 291 00:17:55.079 --> 00:17:59.079 So document.querySelector and we gave it a class 292 00:18:02.026 --> 00:18:04.693 of a button close cookie, right? 293 00:18:09.450 --> 00:18:11.783 And then add event listener. 294 00:18:20.025 --> 00:18:23.692 And now all we have to do is message.remove. 295 00:18:25.529 --> 00:18:28.205 And again here, we don't have to select 296 00:18:28.205 --> 00:18:29.694 the message element again 297 00:18:29.694 --> 00:18:32.216 because we already have it in memory. 298 00:18:32.216 --> 00:18:35.148 So we already have it stored in a variable. 299 00:18:35.148 --> 00:18:39.370 So there's no need to run a document or query selector. 300 00:18:39.370 --> 00:18:43.170 Of course we could do it and it would work as well. 301 00:18:43.170 --> 00:18:45.890 So we could select the element with the class 302 00:18:45.890 --> 00:18:49.610 of cookie message, but again, that's not necessary 303 00:18:49.610 --> 00:18:53.063 because we already have it stored in memory, okay? 304 00:18:55.120 --> 00:18:59.970 And so if I click this done, it's gone, all right? 305 00:18:59.970 --> 00:19:02.160 It's nowhere to be found now, 306 00:19:02.160 --> 00:19:06.600 now this remove method here is actually very recent. 307 00:19:06.600 --> 00:19:09.170 Before this method existed all we could do 308 00:19:09.170 --> 00:19:11.950 was to remove child elements. 309 00:19:11.950 --> 00:19:15.810 And so back then we had to select the parent element first 310 00:19:15.810 --> 00:19:18.390 and then remove the child from there. 311 00:19:18.390 --> 00:19:20.943 So that would look like this. 312 00:19:21.970 --> 00:19:26.970 So message and then we would move up in a DOM tree, 313 00:19:27.300 --> 00:19:32.300 remove child and then again the name of the element 314 00:19:32.910 --> 00:19:35.793 that we want to remove. 315 00:19:36.920 --> 00:19:39.000 So this is a bit cumbersome 316 00:19:39.000 --> 00:19:41.510 but again, this is how we used to do it. 317 00:19:41.510 --> 00:19:45.030 And I'm sure you will see this in some code basis 318 00:19:45.030 --> 00:19:48.770 because many people also don't yet know 319 00:19:48.770 --> 00:19:50.683 about this newer way of doing things. 320 00:19:52.530 --> 00:19:55.630 And by the way, this way of moving up and down 321 00:19:55.630 --> 00:19:58.620 in the DOM tree like selecting, the parent element 322 00:19:58.620 --> 00:20:00.900 is called DOM traversing. 323 00:20:00.900 --> 00:20:03.630 And there a whole lecture on that a bit later 324 00:20:05.035 --> 00:20:07.340 in this section, let's just see if this works as well. 325 00:20:07.340 --> 00:20:09.620 And indeed it does. 326 00:20:09.620 --> 00:20:14.620 So this is how we select, create, insert and delete elements 327 00:20:15.700 --> 00:20:19.126 and to make this 100% complete, just make sure 328 00:20:19.126 --> 00:20:23.610 that you review the insert adjacent HTML method as well 329 00:20:23.610 --> 00:20:26.263 that we used before in the Bankist application.