Removing Nodes

You've come a long way with selecting and manipulating elements, and the last thing 0:00 we're going to look at in this stage is removing elements from the page. 0:04 For example, in a browser-based note-taking application, 0:07 you might want to remove a node when a user deletes a note, or 0:11 perhaps a user wants to delete a photo from a folder in an online photo book. 0:14 We need to remove the node holding that photo, 0:19 we can do this with the removeChild() method. 0:21 Just like appendChild, removeChild takes a child element as an argument, 0:25 though in this case it's the element you want to remove from the parent. 0:29 Let's see it in action, first, we'll add a new button inside 0:32 to trigger the element removal, so right below the ADD item button. 0:38 Let's create a new button with the class removeItemButton and 0:43 make its text Remove last item. 0:50 I'll give this file a save, then over in app.js, 0:58 a lot of what we want to do is very similar to what we did earlier when we 1:01 added items to the list. So up here and our constants, 1:05 let's copy the line where we selected the Add Item button paste IT below. 1:09 And change add item button here to remove item button 1:16 then we say document.query selector button.remove item button. 1:20 And we can do the same with the handler at the bottom so 1:24 I'll copy the Add Item button handler and paste a new one right below it. 1:29 Changing add item button to remove item button. 1:36 So now inside the click event listener, 1:42 we can leave the first line alone since we need that UL to call remove child on, 1:45 now for the list item element we'll need to select the last element in the list. 1:50 And we can do this a number of different ways we could select all the li elements 1:56 with getElementsByTagName for example then find the length of the collection and 2:00 use that to access the last element. 2:05 That would be a perfectly valid approach but I'm gonna show you another way 2:07 using query selector and the CSS pseudo class the last child. 2:11 Now last child selects the last element of a set of children. 2:15 So to select the last list item we can change 2:20 this line here to document.querySelector. 2:25 Then li: Last-child. 2:32 Next we can remove the lines for Li. 2:40 text content and add item input.value since we don't need to modify the element 2:43 we wish to remove nor the input field. And finally instead of calling 2:49 append child, we'll call remove child. 2:54 And now we should be done. 2:58 I'll save the file. 2:59 And over in the browser once you refresh 3:01 you should see the remove last item button. 3:04 And over in the bottom text field I'll add Wisteria to the list. 3:07 And I'll see if I can remove it. 3:13 A click remove last item and sure enough it works. 3:16 You've learned a number of important concepts and 3:23 tools to help you make your web pages interactive with Javascript. 3:26 You can select elements on the page, change those elements, create elements, 3:29 append them and remove them. 3:33 Coming up in the next stage, we'll start looking into all those event listeners 3:35 I've been telling you not to worry about. 3:38 I'll take the mystery out of what they are, and how to use them, 3:40 to make your web application respond to users. 3:43