Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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.
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