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