You've come a long way with selecting and manipulating elements, and the last thing

we're going to look at in this stage is removing elements from the page.

For example, in a browser-based note-taking application,

you might want to remove a node when a user deletes a note, or

perhaps a user wants to delete a photo from a folder in an online photo book.

We need to remove the node holding that photo,

we can do this with the removeChild() method.

Just like appendChild, removeChild takes a child element as an argument,

though in this case it's the element you want to remove from the parent.

Let's see it in action, first, we'll add a new button inside

to trigger the element removal, so right below the ADD item button.

Let's create a new button with the class removeItemButton and

make its text Remove last item.

I'll give this file a save, then over in app.js,

a lot of what we want to do is very similar to what we did earlier when we

added items to the list. So up here and our constants,

let's copy the line where we selected the Add Item button paste IT below.

And change add item button here to remove item button

then we say document.query selector button.remove item button.

And we can do the same with the handler at the bottom so

I'll copy the Add Item button handler and paste a new one right below it.

Changing add item button to remove item button.

So now inside the click event listener,

we can leave the first line alone since we need that UL to call remove child on,

now for the list item element we'll need to select the last element in the list.

And we can do this a number of different ways we could select all the li elements

with getElementsByTagName for example then find the length of the collection and

use that to access the last element.

That would be a perfectly valid approach but I'm gonna show you another way

using query selector and the CSS pseudo class the last child.

Now last child selects the last element of a set of children.

So to select the last list item we can change

this line here to document.querySelector.

Then li: Last-child.

Next we can remove the lines for Li.

text content and add item input.value since we don't need to modify the element

we wish to remove nor the input field. And finally instead of calling

append child, we'll call remove child.

And now we should be done.

I'll save the file.

And over in the browser once you refresh

you should see the remove last item button.

And over in the bottom text field I'll add Wisteria to the list.

And I'll see if I can remove it.

A click remove last item and sure enough it works.

You've learned a number of important concepts and

tools to help you make your web pages interactive with Javascript.

You can select elements on the page, change those elements, create elements,

append them and remove them.

Coming up in the next stage, we'll start looking into all those event listeners

I've been telling you not to worry about.

I'll take the mystery out of what they are, and how to use them,

to make your web application respond to users.