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