Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript and the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Remove Nodes

4:20 with Guil Hernandez

A 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.

Further Reading

Interacting with the DOM – Treehouse course

One of the strengths of JavaScript is its ability to handle user interaction. In this follow-up course, you will learn how to use JavaScript to listen for different events (or user actions) and make changes to the DOM when they occur. In addition, you'll learn how to get around (or traverse) the DOM.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up