Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Responding to User Interaction Listening for Events with addEventListener()

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Last 10 seconds in the video

I didn't really get the last 10 seconds in the video. Can someone explain it to me?

1 Answer

Aakash Srivastava
Aakash Srivastava
5,415 Points

Hey Nour El-din El-helw , what he is saying is :
In the previous videos , you must have saw that , he has added behavious to each of the <li> elements present ( i,e before removing any list item by clicking remove key) there.
Now , when you remove an element add a new <li> element , that <li> element will not have any behavior attached to it because we have not done so . We've added behavior only to those that were present there i,e before deleting.
Here is the example :
Before deleting any element . Here , event listener has been attached to all of the <li>

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>          <!-- This is old element with behavior attached to it -->
 </ul>
}

Now , what he did was remove the last element i,e plums:

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
 </ul>

Now , he add the plums element back .

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>           <!-- This is new element with no behavior attached to it-->
 </ul>

Notice , the behavior was attached to old element not new element . . It will be treated a new element and hence it will not have any behavior attached to it.
Going one step further , this is happening because , behavior is getting added after the element is created . This will attach the behavior to the present element only . Once , the element gets deleted , the behavior will not be present in new elements.

But , if you can add the behavior at the time of creating the element then any new element will also have the behavior attached to it.
That's what Guil will do in next video . Hope it helps :)

Nour El-din El-helw
Nour El-din El-helw
8,241 Points

Awesome explanation! Thanks a lot. :D