title: jQueryUI Sortable - Remove a li from the sortable list
body: <p>What i need is the ability to have an X either a text link, or button, I'm to remove an item from the sortable list. How do I write a function to do so within this code?</p>
  
  <pre><code>$(function() {
      $("#sortable").sortable({
          placeholder: "ui-state-musichighlight"
      });
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul id="sortable"&gt;
      &lt;li class="ui-state-musicdefault"&gt;
          &lt;a class="delete" href="#"&gt;X&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="delete" href="#"&gt;X&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="delete" href="#"&gt;X&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>Still not working, but it does on JSfiddle...Help?</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $("#sortable").sortable({
   placeholder: "ui-state-musichighlight"
  });
  
  $('.delete').click(function(){
     $(this).closest('li').remove();
               //or
     $(this).parent().remove();    
  });
   &lt;/script&gt;
  &lt;style type="text/css"&gt;
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor:move; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  #sortable li.fixed{cursor:default; color:#959595; opacity:0.5;}
  &lt;/style&gt;
  
  &lt;ul id="sortable"&gt;
      &lt;li class="ui-state-musicdefault"&gt;
          &lt;a class="delete" href="javascript:void(0)"&gt;X1&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="delete" href="javascript:void(0)"&gt;X2&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="delete" href="javascript:void(0)"&gt;X3&lt;/a&gt;
          &lt;!-- ...lots of form data here, only text input fields... --&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>update</strong></p>
  
  <p>I have now fixed it with...</p>
  
  <pre><code>    //&lt;![CDATA[ 
      window.onload=function(){ 
  </code></pre>
  
  <p>however its not working within my jQuery function...help?</p>
  
  <pre><code>jQuery("#sortable").append('&lt;li class="ui-state-musicdefault"&gt;&lt;a class="delete" href="javascript:void(0)"&gt;X&lt;/a&gt;
  </code></pre>