This is part 2 of this question (ok maybe part 3)
Here is a working example: http://jsfiddle.net/UcrD8/63/ Here is a earlier attempt and as you can see this works when s
Well since jQM has been updated several time, I was able to get this working
I've seen a lot of issues with dynamic pieces.
For example, if I create page elements after a page load via $.mobile.changePage() that are supposed to be jquery-mobilied-ified (data-role and all that), they don't become jquery-mobile-ified AND there's no "parse my page again, jquery" method to be found anywhere. I've logged a bug as such with the jquery mobile team, but we'll see when they get around to it. Might just do it myself.
When I have to remove/hide an item I typically wrap the item in a div and then hide the div. I don't know how much that will help in this situation though.
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
<ul data-role=listview data-inset=true>
<li data-icon=delete> <a href=#>Element 1 </a></li>
<li data-icon=delete> <a href=#>Element 2 </a></li>
<li data-icon=delete> <a href=#>Element 3 </a></li>
<li data-icon=delete> <a href=#>Element 4 </a></li>
<li data-icon=delete> <a href=#>Element 5 </a></li>
</ul>
</div>
</div>
</body>
</html>
<script>
$("li .ui-icon").bind ("click", function (event)
{
$(this).closest ("li").remove ();
});
</script>