Removing Names

All right, so our app is really starting to take shape. 0:00 So our next task is to provide a way to remove invitee names from the list. 0:03 Let's add a remove button to each list item, so 0:08 that clicking the button deletes the name. 0:10 Over in app.js, the first step will take is adding the remove button as a child 0:13 of each list item, right below the label and check box we added in the last video. 0:18 In fact, the code to do this will be so 0:22 similar to the code we used to create, edit and append the checkbox element. 0:25 So I'll copy these three lines of code and 0:30 paste them right below where we append the label to li. 0:33 So in this new code we'll change the check box constant to button and 0:41 change the element we're creating to a button. 0:46 In the next line we'll change checkbox.type to button.type. 0:52 And here we don't need to change the buttons type, but 0:59 we do need to set its text content to be removed. 1:02 So we'll change it to button.textContent remove. 1:06 And we'll also change label to li because we want to append our 1:14 button to the list item. 1:19 All right, so now we've added a button to each list item, let's save this file and 1:24 test it out in the browser. 1:27 So now when we add a name to the list, 1:30 the remove button is added too, but the button doesn't do anything yet. 1:34 We need to add a handler to it, so let's do that now. 1:39 Over in our code, it makes sense to use a delegated handler for 1:43 removing items just like we did with the check boxes in the last video. 1:47 Because the user may add and delete lots of names to the list. 1:51 It's a good idea to use the parent element to receive the event and 1:55 handle what should happen when the remove button is clicked. 1:58 So just as we did in the last video, we'll set an event handler on ul. 2:02 And we'll handle click events that bubble up when a user clicks one of the remove 2:12 buttons. 2:17 So in other words the click event is initially received by the button but 2:21 travels up the DOM to the li and then the ul element. 2:25 Now, since click events can be triggered on all sorts of elements in the ul, 2:29 we need to filter out elements that aren't buttons. 2:33 And we can do that with an if statement. 2:36 So if the target elements tag name is button, 2:42 we want the code in our if statement to run. 2:47 Otherwise the events from other elements are ignored. 2:50 So now you might be wondering, 2:53 well what if there are other buttons besides remove buttons? 2:54 How would we differentiate between this? 2:58 We'll actually look at that later in this course and 2:59 we'll address that by reading the buttons text content and you 3:02 could also set class names on the buttons and read those to differentiate them. 3:06 But for now let's just get the one remove button we have working. 3:11 So inside the if statement, we want to remove 3:14 the list item from the an ordered list using the remove child method. 3:17 And we can get a reference to the list item from the buttons 3:22 parent node property. 3:25 So let's assign that to a variable we'll call 3:27 li,then we'll say e.target.parentNode. 3:32 Then from here we can traverse to the list items parent node. 3:38 So let's create a ul const and say li.parentNode. 3:42 And once we have these two elements, 3:49 we'll call remove child on the ul passing in the li. 3:51 All right, let's save this and test it out in the browser and see if it's working. 4:01 I'll just refresh and enter a few names. 4:05 Let's say Joel, Alena and Faye. 4:08 And then let's try removing them. 4:15 I'll click the remove button for Alena, and Joel and 4:18 great we see that it's working. 4:21 So now let's just take a look at our submit handler at the top of app.js and 4:24 notice that it's starting to look a little long. 4:29 That makes it more time consuming to read and potentially more confusing for 4:32 other people looking at our code. 4:35 So if we break this code up into separate functions, 4:37 for example, our code will be easier to read and understand. 4:40 It'll also be more modular since we'll create small chunks of code 4:44 that we could potentially reuse pretty easily. 4:47 So let's think about how we could break the submit handler up a little. 4:50 When the user submits the form we cancel the browsers regular submit behavior and 4:55 store the input value from the text field then we clear the input. 5:00 Those actions are related to this submit handler but notice the next section here. 5:05 The lines here create a list item element 5:13 which is added to the DOM on the last line. 5:16 So we could write a function that takes the text we want the list item to contain 5:20 and returns that list item back to us. 5:24 That would make this handler a lot simpler to read and understand. 5:27 So I'm going to select these lines. 5:31 So line 9 through 19 and cut them out of this function and 5:33 use them in a new function. 5:38 So first right above the append child method, 5:41 I'll write out a function name I think makes sense for this. 5:45 I'll name it createLI. 5:48 And I'll pass in the text and 5:55 store the output of this function to the variable li. 5:57 So now this handler is a lot easier to read without those other 6:04 distracting lines. 6:09 Next right above this handler, 6:12 let's write a function named createLI, 6:17 passing in text as a parameter. 6:23 And inside the function we'll paste the code we cut out. 6:28 So at the top of this function, we create the list item element, 6:33 then we assign the value of text as it's content. 6:37 And notice that we named the function's parameter text, 6:41 which means we don't have to rename the text variable in the lines we pasted in. 6:44 So now the only thing we need to add to this function is a return statement 6:50 at the end to return the list item element to the handler. 6:54 Because without a return statement JavaScript functions return 7:00 undefined, but a fault. 7:03 So great, now we have a logical task that's separated into its own function, 7:05 which will make this code a lot easier to read and understand. 7:10 Let's save our file and test our code in the browser, to make sure it still works. 7:14 We'll add some names to the list, click Confirmed Remove, 7:20 and cool, we see that it works just fine. 7:25 All right, so nice work so far. 7:29 Our users can add new names, remove names and check out for responses. 7:31 Now if our users make a typo, it would be nice if they could edit the names. 7:36 And I'll show you how to do that in the next part of this course. 7:39