Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Removing Names

7:43 with Guil Hernandez and Joel Kraft

What if users make a mistake and want to remove a name? Let's add a button to each list item to delete it. We'll also move to a delegated click handler, to allow us to set one handler for all buttons.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Update

On line 13, the statement should read as:

const checkbox = e.target;   // vs. `event.target`

Although the video's code will work in Chrome, Edge, and most versions of Safari, it will not work in Firefox. A Reference Error will be received as event is not defined.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up