Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Interacting with the DOM!
You have completed Interacting with the DOM!
Preview
Just as we can select all child elements of a node we can also select an element's parent with the parentNode property.
Further Reading:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that each task has a remove button,
0:00
we need to program those
buttons to remove tasks.
0:03
In this example, the list item is
the parent of the remove button.
0:07
Just as we're able to select an element's
children, we can also select its parent.
0:12
We'll use the remove method
you used in JavaScript
0:17
and the DOM to remove
elements from the DOM.
0:21
You'll need the call remove
on the button's parent.
0:25
But there's a problem,
you don't have a reference to the parent.
0:27
You'll need to traverse
to the parent node.
0:31
To get a reference to an element's parent
node, you can use the parentNode property.
0:35
First, you get the button's parentNode and
assign it to a variable, parent.
0:44
Then use the parent to
remove the list item.
0:50
Now, let's apply this technique to the to
do application that we've been building.
0:55
Let's change the capitalization behavior
we created in the previous stage.
1:00
Instead of capitalizing a list item
on mouse over, let's delete it.
1:05
To delete a list item, we'll need to do
a little DOM traversal first to get a hold
1:10
of the list item's parent element.
1:14
I'm in app.js now and here's the code for
our capitalization behavior.
1:17
I'll remove the comment format
with the same command as before.
1:23
First, I'll remove the previous function
body, but we'll keep this if statement.
1:29
Then I'll modify the if statement
to respond to only button
1:37
elements instead of LI elements.
1:42
To make things easier to read,
1:49
let's assign the target button
to a variable of its own.
1:52
We'll name this button and we can get
a reference to the target element in
1:56
the event object's target property.
2:00
Then let's get a reference to
the target button element's parent,
2:10
which would be the LI.
2:14
We'll store that in the variable li.
2:16
We'll use the parentNode property
to access the parent of the button.
2:26
Then we'll call remove on li.
2:33
Now let's see this in action.
2:40
It works.
2:47
That's kind of a fun trick,
but it's not very useful yet.
2:48
Back in app.js,
let's change mouseover to click
2:55
There we go.
3:11
The remove buttons still work and none of
the other buttons make the list disappear.
3:13
Let's make one more quick change here.
3:18
Now that we have remove
buttons on each list item,
3:22
we can get rid of this
remove last task button.
3:24
We do that first in the HTML and
3:31
same in app.js.
3:39
We can remove the EventListener for
that button.
3:43
You've learned a lot about how to
control web pages with JavaScript.
3:52
You can select elements on the page,
traverse the other elements in the DOM,
3:56
set listeners on elements, and
4:00
make changes to the DOM in
response to user interaction.
4:02
You even wrote a list making application
that could easily be built out even
4:07
further if you want to practice
with the skills you've learned.
4:11
Remember, we're here to help.
4:15
If you have questions about
anything covered in this course,
4:17
feel free to reach out to the Treehouse
staff or other students in the community.
4:21
Thanks, everyone.
4:25
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up