Using parentNode to Traverse Up the DOM

[MUSIC] 0:00 In the final videos of this course, 0:04 we're going to take a deeper look at how to get around in or traverse the DOM. 0:06 Traversal is similar to selection and 0:10 that you're obtaining a reference to an element. 0:13 So far, we've been starting at the top of the DOM tree, 0:15 to select our elements using the document object. 0:18 However, you'll often have times when you already have a reference to one element. 0:20 And you need to get ahold of another element nearby. 0:25 This is called DOM Traversal. 0:27 Traversal is just a way to move from one part of the DOM to another. 0:29 And select an element based on its relationship to another element. 0:33 For example, let's say, you wanna remove a paragraph from the DOM. 0:37 You already learned how to remove elements from the DOM using removeChild. 0:41 So you'll need to call removeChild on the paragraph's parent. 0:45 But there's a problem, you don't have a reference to the parent. 0:48 So you'll need to traverse to the parentNode. 0:51 To get a reference to an element of parentNode, 0:54 you can use the parentNode property. 0:56 Let's see how to use the parentNode property to solve our problem. 0:59 First, you get the paragraph's parentNode and assign it to a variable parent. 1:02 Then use the parent to remove the paragraph. 1:07 Now, let's apply this technique to the list application we've been building. 1:10 Let's change the capitalization behavior we created in the previous stage. 1:15 So instead of capitalizing a list item on mouse over, let's delete it. 1:19 As I showed you earlier, to delete a list item, we'll need to do a little DOM 1:23 traversal first, to get a hold of the list items parent element. 1:27 Over in app.js, here's the code for our capitalization behavior. 1:31 Now, if I'm going to alter this, to remove list items, 1:35 we won't need a MouseOut handler. 1:39 Because the element will be gone from the DOM before the mouse can leave its area. 1:41 So I'll remove the entire MouseOut handler from our code. 1:45 And the line of code in the MouseOver handlers if block, 1:49 since we're no longer changing text to uppercase. 1:53 So first, to make things easier to read, 1:56 let's assign the target list item to a variable of its own. 1:59 We can get a reference to the target element in the event 2:03 objects target property. 2:06 So I'll assign that to the variable LI, with let li = event.target. 2:08 Then, let's get a reference to the target li element's parent, 2:16 which would be the ul. 2:20 So we'll store that in the variable ul by typing let ul = li.parentNode. 2:21 And then, we can call remove child on it passing an li, the event target. 2:32 So let's type ul.removeChild(li). 2:36 So let's see this in action. 2:44 I'll save my file, move over to the browser. 2:45 And once we refresh, 2:48 we see that passing the mouse over the list removes all the items. 2:50 Now, this is kind of a fun trick but it's not very useful, yet. 2:56 So back in app.js, let's change mouse over to click 3:02 And back in the browser, this is better. 3:10 Clicking gives me more control over removing the items. 3:13 But still, it would be easier for 3:17 users to know an element was removable if there was a button next to it. 3:18 So let's add one next to each item. 3:22 Over in index.html, lets 3:24 add a button element with the text remove before the closing tag of each list item. 3:27 Then, in app.js, I'll modify the click handler to target and 3:41 respond to button elements only, instead of li elements. 3:46 Then, we'll need to update our reference to the list item element. 3:51 Since the li element is the parent of the button. 3:54 We can use the button's parentNode property to 3:58 refer to it with event.target.parentNode. 4:03 The ul is still the parent of the li so we won't need to change the next line. 4:09 And our call to removeChild is still valid, as well. 4:13 So, notice, how I'm getting the parentNode of a parentNode. 4:17 And we could keep chaining these to trace the tree to its roots. 4:21 So let's save our file and switch over to the browser and try this out. 4:25 Click a Remove button and it works great but there's a problem. 4:29 Clicking on any other button makes the entire listDiv disappear. 4:35 So can you think of what's going on here? 4:44 Take a moment to see if you can find the problem for yourself and 4:46 feel free to pause video. 4:49 Let's switch back to index.html and look at the structure. 4:52 So we put our listener on this div. 4:56 And it's targeting the buttons we wanna target. 4:59 But it's also targeting all the other buttons, too. 5:01 As is always the case with JavaScript, there are a number of ways to fix this. 5:05 Now, we could, for example, add more complexity to our handlers if statement 5:10 to filter out the buttons we don't want. 5:14 But what I'm gonna do is change the location of the listener 5:16 to be closer to the buttons I wanna target. 5:19 Let's put it on the ul element. 5:21 Now, in app.js, we currently don't have the ul selected. 5:23 Since there may be other uls on the page at some point. 5:29 Lets call query selector on list div 5:32 to limit our selection to just children of listDiv. 5:34 And I'll insert the new constant here to roughly mirror the DOM structure, 5:38 just to keep the code organized. 5:42 So here, I'm placing it above elements having to do with adding items 5:43 to the list. 5:46 So all we have to do now is set our listener on our newly selected element. 5:52 So we'll say, listUI.addEventListener, save the file. 5:57 Switch back to the browser, and refresh, and let's test it. 6:02 The Remove button still work. 6:07 I'll click on Remove last item and great. 6:10 None of the other buttons make the list disappear. 6:13 Let's make one more quick change here. 6:18 Now, that we have removed buttons on each list item. 6:20 We can get rid of this Remove last item button here. 6:24 So we can go back to index.html and remove the button. 6:28 Let's also take out the JavaScript code pertaining to it. 6:35 So in app.js, I'll delete the removeItemButton constant. 6:38 Then at the bottom, delete the removeItemButton handler. 6:44 All right, so now, that we've practiced a little with the parentNode property. 6:51 You're going to learn how to find and 6:54 work with the sibling elements in the next video. 6:57