Because as of when you hook up your handler, the element doesn't exist. The code
$('.removeme').click(...);
...looks for matching elements that exist right then and hooks those elements up. Since you're creating the element later, it didn't exist when you did the hookup.
Either hook up the element when creating it (not really ideal), or use event delegation:
You can use event delegation via delegate or its global cousin, live (see also the new syntax below):
// delegate (preferred, see also newer syntax below)
$("#a1").delegate(".removeme", "click", function() {
// ...
});
// live (not ideal, works all the way out at the document level)
$(".removeme").live("click", function() {
// ...
});
As of jQuery 1.7, you can use the new on function, which unifies all the various forms of event hookup (direct and delegated):
// New syntax
$("#a1").on("click", ".removeme", function() {
// ...
});
Note that the order of the arguments is slightly different from delegate.
What both delegate and on are actually doing is hooking the click event on the container element (#a1 in your case), and then when the click reaches that element, they look at the path from the actual bottom-most element actually clicked (event.target) up through the container to see if any of them matches the selector. If so, jQuery fires the event handler with this referencing the matched element rather than #a1.