Jquery删除可选项目文本

Question

我有一个有效的代码，但那里有一个小bug。当我选择项目时，我有可选择的菜单，显示选择了哪些项目。当我按下删除按钮时，它会删除所选的项目和文本，但当我再次单击某个项目时，它会在所选项目菜单中显示已删除的项目名称。我怎么能避免这个？ http://jsfiddle.net/dx5c04p5/1/

<style>
  #feedback { font-size: 1.4em;}
  span{ text-decoration: underline; background-color:#b6be98; }
  #selectable .ui-selecting { background: white; }
  #selectable .ui-selected { background: #91b547; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  </style>
    </style>

    <script type="text/javascript">
$(function() {

    $( "#selectable" ).selectable({
      stop: function() {
        var result = $( "#select-result" ).empty();
        $( ".ui-selected", this ).each(function() {
          result.append( " " + ( $(this).text()));
        });
      }

    });

    $("#delete").click(function(){
        $('#selectable .ui-selected').hide();   
        $( "#select-result" ).empty();
    });