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

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.