JavaScript JavaScript and the DOM Traversing the DOM Using parentNode to Traverse Up the DOM

Amandeep Pasricha
Amandeep Pasricha
Front End Web Development Techdegree Student 11,008 Points

Can someone explain why the entire list div disappeared when he clicked the other button?

As asked. Didn't get the explanation.

2 Answers

Louise St. Germain
MOD
Louise St. Germain
Treehouse Moderator 17,945 Points

Hi Amandeep,

He had set up the event listener so that when a button is clicked inside the list div, it will remove the parent element, regardless of what that parent element is. For the buttons next to the individual list items, that worked, because the parent element is the list item itself, which is what he wants to remove.

However, because the event listener was set up such that it didn't distinguish any of the buttons, or which parent it was deleting, when he clicked the "Remove last item" button, the whole div disappeared because it turns out that that particular button's parent was the whole div, not just an individual list item. The HTML structure (see video at 4:57) covered by that event listener looks like this:

<!-- some stuff comes before this... etc -->
    <div class="list">
      <p class="description">Things that are purple:</p>
      <input type="text" class="description">
      <button class="description">Change List Description</button>
      <ul>
        <li>grapes <button>Remove</button></li>
        <li>amethyst <button>Remove</button></li>
        <li>lavender <button>Remove</button></li>
        <li>plums <button>Remove</button></li>
      </ul>

      <input type="text" class="addItemInput">
      <button class="addItemButton">Add Item</button>
      <button class="removeItemButton">Remove last item</button>
    </div>
<!-- more stuff after this... etc -->

He decided to solve the problem by changing the event listener from the div element (i.e., "whenever anything in the .list class div is clicked, do XYZ") down to the ul element within the list div, which is a narrower scope. Now, it will trigger only for the items you see below:

      <ul>
        <li>grapes <button>Remove</button></li>
        <li>amethyst <button>Remove</button></li>
        <li>lavender <button>Remove</button></li>
        <li>plums <button>Remove</button></li>
      </ul>

... which covers only the Remove buttons for the individual items. This means that now those other buttons are "safe" because they are now out of the scope of that event listener.

I hope this helps a bit! It may also be worth watching the video over again, and studying the code change, until it makes sense.

Kafe Hezam
Kafe Hezam
9,159 Points

@Louise St. Germain, explained it pretty well! To add on top of it, if you take a look at the buttons within the '<div></div>'

specifically the ones that are outside the '<ul></ul>' you will understand why the entire list div disappeared.

So, what happens is that when the other buttons are clicked for example:

this button is being clicked '<button class="addItemButton">Add Item</button>'

     1-  let li = event.target.parentNode, which will return the entire '<div></div>'

     2- let ul = li.parentNode, which will return the entire '<body></body>'

     3- ul.removeChild(li), which means   '<body></body>'.removeChild('<div></div>')

I hope this helps!