- Get and Set Content with textContent and innerHTML 8:00
- Change Element Attributes 5:50
- Modifying Elements 2 objectives
- Set Inline Styles with the style Property 9:38
- Create New DOM Elements 4:35
- Review Attributes and Element Creation 5 questions
- Append Nodes 4:52
- DOM Manipulation Review 3 questions
- Insert HTML at Specified Positions 3:39
- Remove Nodes 4:20
- Review Appending and Removing Nodes 5 questions
Preview
Video Player
00:00
00:00
Remove Nodes
4:20A user might want to remove certain elements from the page in a browser-based app, like an item from a TODO list once completed. These actions require that we provide a way to remove a node from the DOM – like the node representing that list item or image element, for instance. One way to achieve this is with the remove() method.
You've come a long way with selecting and
manipulating elements.
0:00
The last thing we're going to look at in
this course is removing elements from
0:03
the page.
0:07
For example,
in a browser based to-do list application,
0:08
the user might want to remove a to-do
item from the list when they complete it.
0:12
Or maybe delete a photo from
an online photo gallery.
0:16
These actions require that we provide
a way to remove a node from the DOM.
0:19
The node representing that list item or
image element for instance.
0:24
One way to achieve this is
with the remove method.
0:28
You specify the child node to remove from
the DOM and call the remove() method on it.
0:31
Let's use the remove method to remove
the last list item or task in our list,
0:37
upon clicking the "Remove last task"
button at the bottom of the list.
0:43
Over in app.js, we'll follow some of
the same steps we took earlier when
0:48
adding items to the list.
0:53
We'll access the button to click,
0:55
add an event listener on the button
that listens for the click event.
0:57
And this time we'll call the remove()
method on the last child list item.
1:01
At the top of app.js I'll declare
a variable named btnRemove and
1:06
assign it the remove button.
1:11
I'll use the document.querySelector method
1:16
to access the button which
has the class btn-remove.
1:20
Next, I'll create my new event listener
by calling the addEventListener
1:30
method on btnRemove.
1:34
I'll pass the method, click,
since we're listening for the click, and
1:42
the function to run when the click happens
1:47
Within the function, I'll select
the list item that is the last child of
1:57
the unordered list and
assign it to the variable lastItem.
2:02
The query selector method comes
in really handy in this case.
2:14
I can use the :last-child
CSS pseudo class as my
2:18
selector string with li:last-child.
2:23
The :last-child selector targets the last
element among a group of sibling elements.
2:29
You can learn more about
it in the teacher's notes.
2:35
Once we have access to the last child li,
2:38
we call the remove method on it
to remove it from the DOM with
2:42
lastItem.remove, followed
by a set of parentheses.
2:46
And that should do it.
2:52
Let's save our file and
have a look in the browser.
2:54
I'll refresh the page and see that
my last task is playing my guitar.
2:57
Clicking the "Remove Last Task"
button removes it from the list.
3:04
Clicking the button again removes
another task, and good, it's working.
3:07
And notice how those list items
no longer appear as children of
3:14
the ul here in the Elements panel.
3:19
In an upcoming JavaScript course about
the DOM, you'll learn how to access and
3:22
remove specific elements from the DOM,
like a specific task in list.
3:27
Check the teacher's notes for
the link to the course.
3:32
You've learned many essential concepts and
3:36
tools to help you make your webpages
interactive with JavaScript.
3:39
You can select elements on the page,
change those elements,
3:43
create elements,
add them to the DOM and remove them.
3:46
There is so
3:50
much more to learn about making web pages
interactive with JavaScript and the DOM.
3:51
In a follow up course, you'll dive deeper
into event listeners and browser events.
3:55
And learn convenient
ways to access nodes and
4:00
navigating the DOM based on the
relationships between elements in the DOM.
4:02
Before then, I strongly encourage you to
continue experimenting with the different
4:07
methods, properties and techniques
to get more practice accessing and
4:12
interacting with the DOM.
4:16
Thanks everyone and happy coding.
4:17