All right, so our app is really starting to take shape.

So our next task is to provide a way to remove invitee names from the list.

Let's add a remove button to each list item, so

that clicking the button deletes the name.

Over in app.js, the first step will take is adding the remove button as a child

of each list item, right below the label and check box we added in the last video.

In fact, the code to do this will be so

similar to the code we used to create, edit and append the checkbox element.

So I'll copy these three lines of code and

paste them right below where we append the label to li.

So in this new code we'll change the check box constant to button and

change the element we're creating to a button.

In the next line we'll change checkbox.type to button.type.

And here we don't need to change the buttons type, but

we do need to set its text content to be removed.

So we'll change it to button.textContent remove.

And we'll also change label to li because we want to append our

button to the list item.

All right, so now we've added a button to each list item, let's save this file and

test it out in the browser.

So now when we add a name to the list,

the remove button is added too, but the button doesn't do anything yet.

We need to add a handler to it, so let's do that now.

Over in our code, it makes sense to use a delegated handler for

removing items just like we did with the check boxes in the last video.

Because the user may add and delete lots of names to the list.

It's a good idea to use the parent element to receive the event and

handle what should happen when the remove button is clicked.

So just as we did in the last video, we'll set an event handler on ul.

And we'll handle click events that bubble up when a user clicks one of the remove

buttons.

So in other words the click event is initially received by the button but

travels up the DOM to the li and then the ul element.

Now, since click events can be triggered on all sorts of elements in the ul,

we need to filter out elements that aren't buttons.

And we can do that with an if statement.

So if the target elements tag name is button,

we want the code in our if statement to run.

Otherwise the events from other elements are ignored.

So now you might be wondering,

well what if there are other buttons besides remove buttons?

How would we differentiate between this?

We'll actually look at that later in this course and

we'll address that by reading the buttons text content and you

could also set class names on the buttons and read those to differentiate them.

But for now let's just get the one remove button we have working.

So inside the if statement, we want to remove

the list item from the an ordered list using the remove child method.

And we can get a reference to the list item from the buttons

parent node property.

So let's assign that to a variable we'll call

li,then we'll say e.target.parentNode.

Then from here we can traverse to the list items parent node.

So let's create a ul const and say li.parentNode.

And once we have these two elements,

we'll call remove child on the ul passing in the li.

All right, let's save this and test it out in the browser and see if it's working.

I'll just refresh and enter a few names.

Let's say Joel, Alena and Faye.

And then let's try removing them.

I'll click the remove button for Alena, and Joel and

great we see that it's working.

So now let's just take a look at our submit handler at the top of app.js and

notice that it's starting to look a little long.

That makes it more time consuming to read and potentially more confusing for

other people looking at our code.

So if we break this code up into separate functions,

for example, our code will be easier to read and understand.

It'll also be more modular since we'll create small chunks of code

that we could potentially reuse pretty easily.

So let's think about how we could break the submit handler up a little.

When the user submits the form we cancel the browsers regular submit behavior and

store the input value from the text field then we clear the input.

Those actions are related to this submit handler but notice the next section here.

The lines here create a list item element

which is added to the DOM on the last line.

So we could write a function that takes the text we want the list item to contain

and returns that list item back to us.

That would make this handler a lot simpler to read and understand.

So I'm going to select these lines.

So line 9 through 19 and cut them out of this function and

use them in a new function.

So first right above the append child method,

I'll write out a function name I think makes sense for this.

I'll name it createLI.

And I'll pass in the text and

store the output of this function to the variable li.

So now this handler is a lot easier to read without those other

distracting lines.

Next right above this handler,

let's write a function named createLI,

passing in text as a parameter.

And inside the function we'll paste the code we cut out.

So at the top of this function, we create the list item element,

then we assign the value of text as it's content.

And notice that we named the function's parameter text,

which means we don't have to rename the text variable in the lines we pasted in.

So now the only thing we need to add to this function is a return statement

at the end to return the list item element to the handler.

Because without a return statement JavaScript functions return

undefined, but a fault.

So great, now we have a logical task that's separated into its own function,

which will make this code a lot easier to read and understand.

Let's save our file and test our code in the browser, to make sure it still works.

We'll add some names to the list, click Confirmed Remove,

and cool, we see that it works just fine.

All right, so nice work so far.

Our users can add new names, remove names and check out for responses.

Now if our users make a typo, it would be nice if they could edit the names.

And I'll show you how to do that in the next part of this course.