ptg16476052Modifying Content on the Page 51518
I’ll start with the markup for the page. First, I need a list. In this example, the user will be
able to add elements to the list and remove elements from the list. All I need is an empty
list with an ID:
Next, I have a form that enables users to add a new item to the end of the list. It has a
text input field and a Submit button:
Finally, I’ve added a link that removes all the elements the user has added to the list:
The action is on the JavaScript side. Let’s look at each of the event handlers for the page
one at a time. First, here’s the event handler for the Clear List link:
$("#clearList").click(function (event) {
event.preventDefault();
$("#editable").empty();
});
This event handler prevents the default action of the link (which would normally return
the user to the top of the page) and calls the empty() method on the list, identified by
selecting its ID. The empty() method removes the contents of an element.
FIGURE 18.12
A page that allows
you to add and
remove content on
the fly.