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
In this video, you'll learn how to remove elements from the page, using the removeChild method.
CSS selectors are a powerful way to select DOM elements. If you'd like to learn more about CSS selectors, including pseudo-class selectors, check out CSS Selectors on Treehouse.
In addition, here's what MDN has to say about CSS selectors.
Practice Manipulating the DOM
This short workshop lets you practice manipulating the DOM with JavaScript and helps make what you learned stick.
You've come a long way with selecting and
manipulating elements, and the last thing
0:00
we're going to look at in this stage
is removing elements from the page.
0:04
For example, in a browser-based
note-taking application,
0:07
you might want to remove a node
when a user deletes a note, or
0:11
perhaps a user wants to delete a photo
from a folder in an online photo book.
0:14
We need to remove the node
holding that photo,
0:19
we can do this with
the removeChild() method.
0:21
Just like appendChild, removeChild
takes a child element as an argument,
0:25
though in this case it's the element
you want to remove from the parent.
0:29
Let's see it in action, first,
we'll add a new button inside
0:32
to trigger the element removal, so
right below the ADD item button.
0:38
Let's create a new button with
the class removeItemButton and
0:43
make its text Remove last item.
0:50
I'll give this file a save,
then over in app.js,
0:58
a lot of what we want to do is very
similar to what we did earlier when we
1:01
added items to the list. So
up here and our constants,
1:05
let's copy the line where we selected
the Add Item button paste IT below.
1:09
And change add item button
here to remove item button
1:16
then we say document.query selector
button.remove item button.
1:20
And we can do the same with
the handler at the bottom so
1:24
I'll copy the Add Item button handler and
paste a new one right below it.
1:29
Changing add item button
to remove item button.
1:36
So now inside the click event listener,
1:42
we can leave the first line alone since
we need that UL to call remove child on,
1:45
now for the list item element we'll need
to select the last element in the list.
1:50
And we can do this a number of different
ways we could select all the li elements
1:56
with getElementsByTagName for example then
find the length of the collection and
2:00
use that to access the last element.
2:05
That would be a perfectly valid approach
but I'm gonna show you another way
2:07
using query selector and
the CSS pseudo class the last child.
2:11
Now last child selects the last
element of a set of children.
2:15
So to select the last
list item we can change
2:20
this line here to document.querySelector.
2:25
Then li: Last-child.
2:32
Next we can remove the lines for Li.
2:40
text content and add item input.value
since we don't need to modify the element
2:43
we wish to remove nor the input field. And
finally instead of calling
2:49
append child, we'll call remove child.
2:54
And now we should be done.
2:58
I'll save the file.
2:59
And over in the browser once you refresh
3:01
you should see the remove
last item button.
3:04
And over in the bottom text field
I'll add Wisteria to the list.
3:07
And I'll see if I can remove it.
3:13
A click remove last item and
sure enough it works.
3:16
You've learned a number
of important concepts and
3:23
tools to help you make your web
pages interactive with Javascript.
3:26
You can select elements on the page,
change those elements, create elements,
3:29
append them and remove them.
3:33
Coming up in the next stage, we'll start
looking into all those event listeners
3:35
I've been telling you not to worry about.
3:38
I'll take the mystery out of what
they are, and how to use them,
3:40
to make your web application
respond to users.
3:43
You need to sign up for Treehouse in order to download course files.
Sign up