front-end-developer_1_

Front-End-Developer - Level 1
Now, if we click Say "hello" and then the message, we get our alert! But there's a problem: if
we click the button twice, clicking the last message will open the alert twice. And if we click
the button again, the last message will open the alert three times, and the middle message
will open it twice. What's happening is that the first time we click the button, $('.delete')
only finds a single message in each list, and attaches an event handler. But the next time we
click the button, that first message is already on the page, and a second event handler is
attached to it. And each time we click the button again, another event handler is attached to
every message on the page.
What we want is to only attach handlers to the message we most recently inserted. Since
we're inserting them at the top of each list, we can select one of the s, look through its
child elements (the s), and select the first one of them:
$("ul#user").children("li").first().click(function() {
alert('hi');
});
$("ul#webpage").children("li").first().click(function() {
alert('hi');
});
Now, each of the messages only opens a single dialog box when clicked.
Finally, we should replace our callback with the actual code to delete the message:
$("ul#user").children("li").first().click(function() {
$(this).remove();
});
$("ul#webpage").children("li").first().click(function() {
$(this).remove();
});
remove() is pretty straightforward, but what is this ? this is a bit of a tricky concept in
JavaScript, and I'm not going to give it a full explanation here. For now, you can think of it as
referring to whatever was clicked on.
We're done with this rather long lesson. Congrats on making it through!
Summary
Insert within a DOM element at the beginning or end:
$('ul').prepend('First list item');
$('p').append('New last sentence of the paragraph.');
DOM Manipulation and Traversal
174