Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,298 --> 00:00:03,170 In this lecture we're gonna learn 2 2 00:00:03,170 --> 00:00:08,170 how to select, create and delete elements with JavaScript. 3 3 00:00:08,710 --> 00:00:11,580 Now, the goal of this lecture is more to be 4 4 00:00:11,580 --> 00:00:14,530 like a quick reference for you in the future 5 5 00:00:14,530 --> 00:00:17,310 because these methods that I'm gonna show you here 6 6 00:00:17,310 --> 00:00:20,320 are actually way more difficult to find 7 7 00:00:20,320 --> 00:00:24,150 and to understand from the MDN documentation. 8 8 00:00:24,150 --> 00:00:27,250 And so when you need some of these methods in the future 9 9 00:00:27,250 --> 00:00:29,400 then all you have to do is to come back 10 10 00:00:29,400 --> 00:00:31,923 to this lecture and see how it works. 11 11 00:00:33,860 --> 00:00:35,920 And let's start by learning a little bit more 12 12 00:00:35,920 --> 00:00:37,940 about selecting elements. 13 13 00:00:37,940 --> 00:00:42,123 And I'm gonna start at the very top of any HTML document. 14 14 00:00:43,290 --> 00:00:45,950 So as you know, that is the document. 15 15 00:00:45,950 --> 00:00:49,480 And so actually we do have a special way of selecting 16 16 00:00:49,480 --> 00:00:54,100 the entire document of well, of any webpage, 17 17 00:00:54,100 --> 00:00:59,100 so of any document and that's document element, all right. 18 18 00:01:00,360 --> 00:01:03,210 So just document here is not enough 19 19 00:01:03,210 --> 00:01:05,900 to select the document element 20 20 00:01:05,900 --> 00:01:10,450 because this is not the real DOM element, all right? 21 21 00:01:10,450 --> 00:01:13,740 So for example if we want to apply CSS styles 22 22 00:01:13,740 --> 00:01:15,850 to the entire page we always need 23 23 00:01:15,850 --> 00:01:20,850 to select document element, okay? 24 24 00:01:20,850 --> 00:01:23,363 Let's just take a look here in the console. 25 25 00:01:24,640 --> 00:01:29,640 And so indeed that is now the entire HTML here, okay? 26 26 00:01:29,840 --> 00:01:33,793 And we can also easily select the head and body. 27 27 00:01:34,810 --> 00:01:39,683 So that's just head and dot body as you can imagine. 28 28 00:01:41,600 --> 00:01:44,260 So this is not visible on the page 29 29 00:01:44,260 --> 00:01:48,330 and the body is then also the entire kind 30 30 00:01:48,330 --> 00:01:51,640 of visible document, all right? 31 31 00:01:51,640 --> 00:01:53,530 So for these special elements 32 32 00:01:53,530 --> 00:01:56,230 we don't even need to write any selector 33 33 00:01:56,230 --> 00:01:59,070 but otherwise as you already know, 34 34 00:01:59,070 --> 00:02:01,023 we can use query selector. 35 35 00:02:02,600 --> 00:02:03,700 So that's nothing new, 36 36 00:02:04,930 --> 00:02:09,280 for example we can select the header element just like this 37 37 00:02:09,280 --> 00:02:11,600 and this will then return the first element 38 38 00:02:11,600 --> 00:02:14,423 that matches this selector here. 39 39 00:02:15,760 --> 00:02:18,280 Now, if we want to select multiple elements 40 40 00:02:18,280 --> 00:02:21,510 then we should use document.queryselectorAll. 41 41 00:02:24,460 --> 00:02:26,610 So again, we already used this one 42 42 00:02:29,170 --> 00:02:30,840 and so here on this page 43 43 00:02:30,840 --> 00:02:33,453 we have multiple elements with these section class. 44 44 00:02:34,710 --> 00:02:38,120 So basically each of these here are a section 45 45 00:02:39,370 --> 00:02:41,323 with the class of section, okay? 46 46 00:02:43,570 --> 00:02:46,830 And I will actually store this here in a variable 47 47 00:02:46,830 --> 00:02:50,210 because I want to show you something 48 48 00:02:50,210 --> 00:02:51,703 a little bit later, okay? 49 49 00:02:56,850 --> 00:03:00,740 But as you know already, this will return a node list 50 50 00:03:00,740 --> 00:03:03,040 and then that will contain all of the elements 51 51 00:03:04,340 --> 00:03:09,340 that are a section so that are selected by this selector. 52 52 00:03:10,150 --> 00:03:13,040 So these ones we have been using all the time. 53 53 00:03:13,040 --> 00:03:15,920 And in fact they are the most used ways 54 54 00:03:15,920 --> 00:03:17,700 of selecting elements. 55 55 00:03:17,700 --> 00:03:21,270 Now, as you learned hopefully from the previous lecture 56 56 00:03:21,270 --> 00:03:24,890 these are available not only on the document here 57 57 00:03:24,890 --> 00:03:29,890 like this, but also on all the elements, okay? 58 58 00:03:30,020 --> 00:03:32,220 And we actually use this a lot when we want 59 59 00:03:32,220 --> 00:03:34,730 to select child elements as we will do 60 60 00:03:34,730 --> 00:03:38,300 a little bit later in this section, okay? 61 61 00:03:38,300 --> 00:03:41,700 Next I think we also already talked 62 62 00:03:41,700 --> 00:03:45,190 about get element by ID. 63 63 00:03:45,190 --> 00:03:50,190 And so here we only pass the ID name itself 64 64 00:03:50,350 --> 00:03:51,833 without the selector. 65 65 00:03:52,880 --> 00:03:55,880 So this section here has ID section one 66 66 00:03:56,810 --> 00:04:00,410 and so, yeah, we don't need the selector here. 67 67 00:04:00,410 --> 00:04:04,530 That's only for the query selector methods, all right. 68 68 00:04:04,530 --> 00:04:05,710 So I showed you this one 69 69 00:04:05,710 --> 00:04:08,730 because now there are also some others. 70 70 00:04:08,730 --> 00:04:13,730 So there are get elements and get elements, 71 71 00:04:14,270 --> 00:04:19,270 so with an S by tag name. 72 72 00:04:22,050 --> 00:04:24,940 And so let's say we want to get all the buttons. 73 73 00:04:24,940 --> 00:04:28,173 So all the elements with the name of button basically. 74 74 00:04:29,550 --> 00:04:34,550 So that's actually store this also all buttons 75 75 00:04:35,330 --> 00:04:37,143 and then log it to the console. 76 76 00:04:41,060 --> 00:04:42,810 Let's give it some more space here. 77 77 00:04:43,740 --> 00:04:46,130 And so here now you see all the buttons 78 78 00:04:46,130 --> 00:04:48,440 that are on our page. 79 79 00:04:48,440 --> 00:04:50,040 Now, what I wanted to show you is 80 80 00:04:50,040 --> 00:04:54,190 that this method actually returns an HTML collection. 81 81 00:04:54,190 --> 00:04:56,800 So that's different from a node list 82 82 00:04:56,800 --> 00:05:00,080 because an HTML collection is actually 83 83 00:05:00,080 --> 00:05:02,580 a so-called life collection. 84 84 00:05:02,580 --> 00:05:06,110 And that means that if the DOM changes then this collection 85 85 00:05:06,110 --> 00:05:09,760 is also immediately updated automatically. 86 86 00:05:09,760 --> 00:05:12,950 So for example, if I remove this button here 87 87 00:05:13,790 --> 00:05:16,660 and I can do that by clicking inspect 88 88 00:05:16,660 --> 00:05:19,330 and then that will select that button here 89 89 00:05:19,330 --> 00:05:22,340 then all I need to do is to hit delete 90 90 00:05:23,440 --> 00:05:27,130 and then if I go back here to the console 91 91 00:05:27,130 --> 00:05:30,080 and try to read the allButtons again 92 92 00:05:31,090 --> 00:05:34,090 then you see that we only have eight elements in here 93 93 00:05:35,060 --> 00:05:39,310 while before we had nine, right? 94 94 00:05:39,310 --> 00:05:41,890 So that's something very important to keep in mind 95 95 00:05:41,890 --> 00:05:45,310 when you use this selector here, okay? 96 96 00:05:45,310 --> 00:05:47,830 And sometimes it's actually quite helpful 97 97 00:05:47,830 --> 00:05:50,600 to have an HTML collection like this 98 98 00:05:50,600 --> 00:05:52,690 which updates automatically 99 99 00:05:52,690 --> 00:05:55,070 because of course we can also delete elements 100 100 00:05:55,070 --> 00:05:58,940 from the DOM programmatically not just manually 101 101 00:05:58,940 --> 00:06:03,200 like I just deleted this button here earlier, all right. 102 102 00:06:03,200 --> 00:06:07,080 Now the same does not happen with a node list. 103 103 00:06:07,080 --> 00:06:12,080 So if I take this whole section here and delete it 104 104 00:06:13,730 --> 00:06:18,380 and if I then try to read all the sections 105 105 00:06:18,380 --> 00:06:21,740 then I still have the same four elements here 106 106 00:06:21,740 --> 00:06:23,310 in the node list. 107 107 00:06:23,310 --> 00:06:26,470 And that's because this variable here was created 108 108 00:06:26,470 --> 00:06:29,550 by the time that this section still existed. 109 109 00:06:29,550 --> 00:06:31,370 And it didn't update itself 110 110 00:06:31,370 --> 00:06:35,240 as I deleted one of its elements, all right? 111 111 00:06:35,240 --> 00:06:38,423 So again, that's important to keep in mind, okay? 112 112 00:06:41,440 --> 00:06:43,760 And finally I also want to show you 113 113 00:06:43,760 --> 00:06:48,760 get elements by class name. 114 114 00:06:50,090 --> 00:06:53,510 So this is similar again to get element by ID 115 115 00:06:53,510 --> 00:06:55,283 and get elements by tag name. 116 116 00:06:56,290 --> 00:06:58,853 So here we can now specify a class name. 117 117 00:06:59,950 --> 00:07:02,310 So let's say button and once again 118 118 00:07:02,310 --> 00:07:04,070 we don't need a selector. 119 119 00:07:04,070 --> 00:07:08,200 So it's not a dot, it's simply the name of the classes. 120 120 00:07:08,200 --> 00:07:11,750 And this one will also return a life HTML collection. 121 121 00:07:11,750 --> 00:07:16,750 So just as I explained to you earlier, okay. 122 122 00:07:17,220 --> 00:07:21,160 So this is how we select elements, 123 123 00:07:21,160 --> 00:07:25,030 selecting elements once of these, you already knew. 124 124 00:07:25,030 --> 00:07:27,810 So basically these two more modern ones 125 125 00:07:27,810 --> 00:07:29,830 but these ones also have a place. 126 126 00:07:29,830 --> 00:07:33,020 So this one and this one in case that you really need 127 127 00:07:33,020 --> 00:07:37,340 an HTML collection which in some situations is useful 128 128 00:07:37,340 --> 00:07:41,820 but most of the time, I simply keep using query selector 129 129 00:07:41,820 --> 00:07:45,173 and query selector all, okay. 130 130 00:07:46,040 --> 00:07:51,040 Next up, let's talk about creating and inserting elements. 131 131 00:07:52,750 --> 00:07:55,640 Now we can create HTML elements using 132 132 00:07:55,640 --> 00:07:58,430 the insert adjacent HTML function 133 133 00:07:58,430 --> 00:08:03,280 that we used before and the Bankist application remember. 134 134 00:08:03,280 --> 00:08:08,280 So we used insert adjacent HTML to create movements, right? 135 135 00:08:13,630 --> 00:08:17,170 And this is a quick and easy way of creating elements 136 136 00:08:17,170 --> 00:08:21,470 that I really like a lot and use the most actually. 137 137 00:08:21,470 --> 00:08:24,470 So please go back to the Bankist application 138 138 00:08:24,470 --> 00:08:28,210 and remember exactly how it works now, right? 139 139 00:08:28,210 --> 00:08:31,090 So I don't need to talk about this one here again 140 140 00:08:31,090 --> 00:08:32,430 and I will instead focus 141 141 00:08:32,430 --> 00:08:35,230 on some other ways of creating elements 142 142 00:08:35,230 --> 00:08:37,720 because sometimes it's more useful 143 143 00:08:37,720 --> 00:08:40,430 to actually build the element a bit more 144 144 00:08:40,430 --> 00:08:43,940 from scratch, like more programmatically using 145 145 00:08:43,940 --> 00:08:47,360 a combination of some other methods. 146 146 00:08:47,360 --> 00:08:51,723 So let's see how and then it will all make sense, okay? 147 147 00:08:53,980 --> 00:08:57,340 So let's use document.createElement, okay? 148 148 00:09:01,000 --> 00:09:02,360 And then here we need to pass 149 149 00:09:02,360 --> 00:09:06,270 in the string of basically the tag name. 150 150 00:09:06,270 --> 00:09:09,060 So I want to create a div here now. 151 151 00:09:09,060 --> 00:09:11,730 And so this will return a DOM element 152 152 00:09:11,730 --> 00:09:13,853 that we can then save somewhere. 153 153 00:09:14,830 --> 00:09:17,120 And I'm calling this one message 154 154 00:09:17,120 --> 00:09:22,120 and I will explain why in a second, okay? 155 155 00:09:22,290 --> 00:09:25,520 So again, this here creates a DOM element 156 156 00:09:25,520 --> 00:09:29,430 and then stores that element into the message. 157 157 00:09:29,430 --> 00:09:32,874 Now that element is not yet anywhere in our DOM. 158 158 00:09:32,874 --> 00:09:36,200 All this is is a DOM object that we can now use 159 159 00:09:36,200 --> 00:09:40,550 to do something on it but it is not yet in the DOM itself. 160 160 00:09:40,550 --> 00:09:45,550 So it's nowhere to be found on our webpage here, okay? 161 161 00:09:45,580 --> 00:09:47,720 If we want it on the page then we need 162 162 00:09:47,720 --> 00:09:50,600 to manually insert it into the page. 163 163 00:09:50,600 --> 00:09:54,440 But first let's actually do something with it. 164 164 00:09:54,440 --> 00:09:57,483 So for example, we can add classes. 165 165 00:09:58,400 --> 00:10:01,330 And so now this is like any other selection 166 166 00:10:01,330 --> 00:10:03,520 that we have, okay? 167 167 00:10:03,520 --> 00:10:07,340 So if we have an element in our DOM and select it 168 168 00:10:07,340 --> 00:10:11,650 for example, using query selector here like this 169 169 00:10:11,650 --> 00:10:14,040 then the result is also a DOM object 170 170 00:10:14,040 --> 00:10:15,980 that we can use in our code. 171 171 00:10:15,980 --> 00:10:18,243 And this year is now just the same. 172 172 00:10:19,420 --> 00:10:22,990 It's just an object that represents a DOM element. 173 173 00:10:22,990 --> 00:10:26,030 And so just like before we can use, for example 174 174 00:10:26,030 --> 00:10:31,030 class list on it, so class list, and then we can add 175 175 00:10:32,760 --> 00:10:37,760 and I will add a class called cookie message. 176 176 00:10:38,830 --> 00:10:41,590 And that's because here we will now programmatically 177 177 00:10:41,590 --> 00:10:45,660 built an element which will display a small cookie message 178 178 00:10:45,660 --> 00:10:47,430 on the bottom of the screen. 179 179 00:10:47,430 --> 00:10:51,670 So I'm sure you've seen these on all web pages these days. 180 180 00:10:51,670 --> 00:10:52,963 They're quite annoying. 181 181 00:10:54,790 --> 00:10:59,510 So let me search here for cookie and here you go. 182 182 00:10:59,510 --> 00:11:03,560 So this is the class that I created for this cookie message. 183 183 00:11:03,560 --> 00:11:06,020 And so this is the one we are adding now 184 184 00:11:06,020 --> 00:11:10,303 to our newly created element, okay? 185 185 00:11:11,260 --> 00:11:15,143 Let's get rid of this here and now we can keep going. 186 186 00:11:16,790 --> 00:11:21,660 So for example, we can add text into the element 187 187 00:11:21,660 --> 00:11:25,233 and as always we do that using text content. 188 188 00:11:26,150 --> 00:11:31,150 So let's just say we use cookies for improved functionality 189 189 00:11:34,840 --> 00:11:39,840 and analytics, something like that, analytics, okay? 190 190 00:11:41,360 --> 00:11:43,826 So this inserts simply text 191 191 00:11:43,826 --> 00:11:47,323 but of course we can also insert a HTML. 192 192 00:11:48,380 --> 00:11:51,740 And so that is then inner HTML 193 193 00:11:51,740 --> 00:11:54,520 which we also already used before. 194 194 00:11:54,520 --> 00:11:58,110 And remember that we can use both of these properties 195 195 00:11:58,110 --> 00:12:02,840 to read and to set content, okay? 196 196 00:12:02,840 --> 00:12:06,390 And so here let's not write a string of HTML 197 197 00:12:07,480 --> 00:12:11,763 so let's copy this and then we can also like add a button. 198 198 00:12:14,180 --> 00:12:17,513 Okay, I'm missing the colon here. 199 199 00:12:18,892 --> 00:12:20,913 So let's add a button element. 200 200 00:12:27,600 --> 00:12:30,500 Okay, so I'm just writing some HTML here. 201 201 00:12:30,500 --> 00:12:33,903 This doesn't matter, just copy this code. 202 202 00:12:34,950 --> 00:12:37,312 All right, It's just that it will have 203 203 00:12:37,312 --> 00:12:39,440 the correct formatting then based 204 204 00:12:39,440 --> 00:12:41,483 on the CSS that I wrote before. 205 205 00:12:43,620 --> 00:12:45,870 So this will basically just display 206 206 00:12:45,870 --> 00:12:49,523 a nicely formatted button saying, got it, okay? 207 207 00:12:51,960 --> 00:12:54,720 But anyway we now have this element 208 208 00:12:54,720 --> 00:12:59,210 and all we have to do now is to insert it into our DOM. 209 209 00:12:59,210 --> 00:13:01,373 And let's do that here in our header. 210 210 00:13:03,150 --> 00:13:06,090 So give it some more space. 211 211 00:13:06,090 --> 00:13:08,283 So all of this year is our header element. 212 212 00:13:10,510 --> 00:13:14,333 So this takes up so much space. 213 213 00:13:15,370 --> 00:13:17,170 Can't get rid of it for some reason. 214 214 00:13:18,060 --> 00:13:20,240 So all of this is our header. 215 215 00:13:20,240 --> 00:13:22,090 And so we cannot select this header 216 216 00:13:22,090 --> 00:13:25,223 and then a pent or message to that element. 217 217 00:13:26,324 --> 00:13:29,977 And we already have that here, let's call this the header 218 218 00:13:32,253 --> 00:13:37,253 and now we can say header.prepend. 219 219 00:13:40,240 --> 00:13:43,360 And now indeed, here it is. 220 220 00:13:43,360 --> 00:13:46,190 So here is our message. 221 221 00:13:46,190 --> 00:13:48,423 So maybe you saw it being added here. 222 222 00:13:49,530 --> 00:13:53,780 So indeed is now also really in our DOM. 223 223 00:13:53,780 --> 00:13:57,603 Now, for some reason, I think this doesn't look quite right. 224 224 00:13:59,450 --> 00:14:00,563 Well, maybe it does. 225 225 00:14:03,120 --> 00:14:05,530 So what matters here is that we just inserted 226 226 00:14:05,530 --> 00:14:10,530 this element really into our HTML, so right into our DOM. 227 227 00:14:11,370 --> 00:14:13,840 So prepending basically adds the element 228 228 00:14:13,840 --> 00:14:18,640 as the first child of this element, okay? 229 229 00:14:18,640 --> 00:14:21,840 But we can also edit as the last child. 230 230 00:14:21,840 --> 00:14:24,614 And so that is a append. 231 231 00:14:24,614 --> 00:14:29,614 So header.append message and watch what happens now? 232 232 00:14:33,350 --> 00:14:36,040 So now we see that it's really appended, 233 233 00:14:36,040 --> 00:14:37,583 so it's the last child. 234 234 00:14:38,730 --> 00:14:40,943 So it's gotta be, yeah, it's here. 235 235 00:14:42,890 --> 00:14:45,470 Now what we see here is that the element 236 236 00:14:45,470 --> 00:14:48,520 was actually only insert at once, 237 237 00:14:48,520 --> 00:14:51,210 now that's because this element here 238 238 00:14:51,210 --> 00:14:56,030 so message is now indeed a life element living in the DOM. 239 239 00:14:56,030 --> 00:14:58,180 And so therefore it cannot be 240 240 00:14:58,180 --> 00:15:01,200 at multiple places at the same time. 241 241 00:15:01,200 --> 00:15:04,580 It's just like a person that also cannot be 242 242 00:15:04,580 --> 00:15:07,470 at two places simultaneously, right? 243 243 00:15:07,470 --> 00:15:10,620 So what's happened here is that we first prepended 244 244 00:15:10,620 --> 00:15:13,800 the element and then we appended it. 245 245 00:15:13,800 --> 00:15:15,630 And what this appends did here 246 246 00:15:15,630 --> 00:15:17,670 was to basically move the element 247 247 00:15:17,670 --> 00:15:21,310 from being the first child to being the last child. 248 248 00:15:21,310 --> 00:15:24,700 All right, so basically it moved the element 249 249 00:15:24,700 --> 00:15:26,320 and didn't really insert it 250 250 00:15:26,320 --> 00:15:30,410 because it was already inserted here by prepend 251 251 00:15:30,410 --> 00:15:32,750 So what this means is that we can use 252 252 00:15:32,750 --> 00:15:37,330 the prepend and append methods not only to insert elements 253 253 00:15:37,330 --> 00:15:39,312 but also to move them. 254 254 00:15:39,312 --> 00:15:44,120 And again, that is because a DOM element is unique. 255 255 00:15:44,120 --> 00:15:48,160 So it can always only exist at one place at a time. 256 256 00:15:48,160 --> 00:15:50,540 But now what if we actually wanted 257 257 00:15:50,540 --> 00:15:54,370 to insert multiple copies of the same element? 258 258 00:15:54,370 --> 00:15:56,950 Well, in that case we actually would have 259 259 00:15:56,950 --> 00:15:59,850 to first copy the first element. 260 260 00:15:59,850 --> 00:16:04,523 So let's comment out this part here and say header.append 261 261 00:16:06,660 --> 00:16:10,050 and then instead of appending the message directly 262 262 00:16:10,050 --> 00:16:12,020 we first clone it. 263 263 00:16:12,020 --> 00:16:15,640 So that's clone node, and then we need to pass 264 264 00:16:15,640 --> 00:16:19,890 in true or we can pass in true which simply means 265 265 00:16:19,890 --> 00:16:23,370 that all the child elements will also be copied. 266 266 00:16:23,370 --> 00:16:27,130 And so now as you see, we get the same cookie message 267 267 00:16:27,130 --> 00:16:32,130 in both places, but usually this is not what we want. 268 268 00:16:32,670 --> 00:16:34,603 So let's actually only append it. 269 269 00:16:35,520 --> 00:16:37,410 So having it here at the bottom 270 270 00:16:37,410 --> 00:16:39,193 where it makes the most sense. 271 271 00:16:40,870 --> 00:16:45,190 Now, to finish there are actually two more methods 272 272 00:16:45,190 --> 00:16:50,190 and that is before and after. 273 273 00:16:51,840 --> 00:16:55,260 And as the name says this one will insert a message 274 274 00:16:55,260 --> 00:16:57,100 before to header element. 275 275 00:16:57,100 --> 00:16:59,410 So as a sibling and this one here 276 276 00:16:59,410 --> 00:17:03,173 after the header element, so also as a sibling. 277 277 00:17:04,960 --> 00:17:08,373 Let's just get rid of this so we can see it here before. 278 278 00:17:09,310 --> 00:17:13,420 And so now it's actually really before the header, 279 279 00:17:13,420 --> 00:17:14,940 so first a cookie message 280 280 00:17:14,940 --> 00:17:17,523 and then the header, but they are siblings. 281 281 00:17:19,920 --> 00:17:24,010 And now the same here, it's now after the header. 282 282 00:17:24,010 --> 00:17:24,843 So you have the whole header 283 283 00:17:24,843 --> 00:17:29,820 and then we have this cookie element, all right? 284 284 00:17:31,150 --> 00:17:32,510 So that is how we create 285 285 00:17:32,510 --> 00:17:35,190 and insert elements, programmatically 286 286 00:17:35,190 --> 00:17:40,190 and now to finish, let's also delete elements, okay? 287 287 00:17:42,020 --> 00:17:45,554 So what I'm gonna do is to remove this element 288 288 00:17:45,554 --> 00:17:47,970 when we click this button, 289 289 00:17:47,970 --> 00:17:50,110 so let's select this button 290 290 00:17:50,110 --> 00:17:52,943 and then as we click it, remove the message. 291 291 00:17:55,079 --> 00:17:59,079 So document.querySelector and we gave it a class 292 292 00:18:02,026 --> 00:18:04,693 of a button close cookie, right? 293 293 00:18:09,450 --> 00:18:11,783 And then add event listener. 294 294 00:18:20,025 --> 00:18:23,692 And now all we have to do is message.remove. 295 295 00:18:25,529 --> 00:18:28,205 And again here, we don't have to select 296 296 00:18:28,205 --> 00:18:29,694 the message element again 297 297 00:18:29,694 --> 00:18:32,216 because we already have it in memory. 298 298 00:18:32,216 --> 00:18:35,148 So we already have it stored in a variable. 299 299 00:18:35,148 --> 00:18:39,370 So there's no need to run a document or query selector. 300 300 00:18:39,370 --> 00:18:43,170 Of course we could do it and it would work as well. 301 301 00:18:43,170 --> 00:18:45,890 So we could select the element with the class 302 302 00:18:45,890 --> 00:18:49,610 of cookie message, but again, that's not necessary 303 303 00:18:49,610 --> 00:18:53,063 because we already have it stored in memory, okay? 304 304 00:18:55,120 --> 00:18:59,970 And so if I click this done, it's gone, all right? 305 305 00:18:59,970 --> 00:19:02,160 It's nowhere to be found now, 306 306 00:19:02,160 --> 00:19:06,600 now this remove method here is actually very recent. 307 307 00:19:06,600 --> 00:19:09,170 Before this method existed all we could do 308 308 00:19:09,170 --> 00:19:11,950 was to remove child elements. 309 309 00:19:11,950 --> 00:19:15,810 And so back then we had to select the parent element first 310 310 00:19:15,810 --> 00:19:18,390 and then remove the child from there. 311 311 00:19:18,390 --> 00:19:20,943 So that would look like this. 312 312 00:19:21,970 --> 00:19:26,970 So message and then we would move up in a DOM tree, 313 313 00:19:27,300 --> 00:19:32,300 remove child and then again the name of the element 314 314 00:19:32,910 --> 00:19:35,793 that we want to remove. 315 315 00:19:36,920 --> 00:19:39,000 So this is a bit cumbersome 316 316 00:19:39,000 --> 00:19:41,510 but again, this is how we used to do it. 317 317 00:19:41,510 --> 00:19:45,030 And I'm sure you will see this in some code basis 318 318 00:19:45,030 --> 00:19:48,770 because many people also don't yet know 319 319 00:19:48,770 --> 00:19:50,683 about this newer way of doing things. 320 320 00:19:52,530 --> 00:19:55,630 And by the way, this way of moving up and down 321 321 00:19:55,630 --> 00:19:58,620 in the DOM tree like selecting, the parent element 322 322 00:19:58,620 --> 00:20:00,900 is called DOM traversing. 323 323 00:20:00,900 --> 00:20:03,630 And there a whole lecture on that a bit later 324 324 00:20:05,035 --> 00:20:07,340 in this section, let's just see if this works as well. 325 325 00:20:07,340 --> 00:20:09,620 And indeed it does. 326 326 00:20:09,620 --> 00:20:14,620 So this is how we select, create, insert and delete elements 327 327 00:20:15,700 --> 00:20:19,126 and to make this 100% complete, just make sure 328 328 00:20:19,126 --> 00:20:23,610 that you review the insert adjacent HTML method as well 329 329 00:20:23,610 --> 00:20:26,263 that we used before in the Bankist application. 29400