Problem with removing <li> elements

Problem with removing <li> elements

Hello!

I am currently having a issue with the following code, which allows to add <li> items to an sortable <ul> - that works fine so far.

Within the <li> items I have a link, which should delete that <li> element. That also works for the <li> items, which I have defined in the html body, but not for <li> elements, which are dynamically added.

Any hints on that?


<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>

<script  type="text/javascript">
   
    $(function(){
   
        var i=$('ul#sortable li').size() + 1;
       
        $('a#add').click(function(){
            $('<li> Item ' + i + '<a href="#"> delete me</a></li>').appendTo('ul#sortable');
            i++;
        });   
       
        $('ul#sortable a').click(function(){
           $(this).parent().remove();
        });

        $('a#remove').click(function(){
            $('ul#sortable li:last').remove();
            i--;
        });
      
   $("#sortable").sortable();
   $("#sortable").disableSelection();   
      
    });
   
    </script>


The html code:

<ul id="sortable">
   <li> Item 1 <a href="#"> delete me</a></li>
   <li> Item 2 <a href="#"> delete me</a></li>
   <li> Item 3 <a href="#"> delete me</a></li>
   <li> Item 4 <a href="#"> delete me</a></li>
   <li> Item 5 <a href="#"> delete me</a></li>
</ul>


Thanks for your help!