title: removing div from a jquery sortable
body: <p>I've developed a "Google-Maps-like" user interface for my intranet where users can add steps to calculated routes and distances. I'm using sortable <code>div</code>s to reorder steps. Now I want to remove steps, but my JavaScript/jQuery code doesn't work at all. Can you help me?</p>
  
  <p>My jQuery code:</p>
  
  <pre><code>$(document).ready(function() {
          $("#sortable").sortable();
          $("#sortable").disableSelection();
  });
  
  
  
      function addStep() {
          var temp = $('.template').clone();
          $(temp).removeClass("template");
          $(temp).addClass("sort");
          $('#sortable').append(temp);
  
      }
      function removeStep() {
  
          $(this).closest('div.sort').remove();
          $("#sortable").sortable('refresh');
      }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>//template to add new step
   &lt;div class="template"&gt;
          &lt;input type="text" name="addressN" value="" class="address" /&gt;
          &lt;input type="button" class="remove" value="Remove" onclick="removeStep();" /&gt;
      &lt;/div&gt;
  //sortable list of step
      &lt;div id="sortable"&gt;
          &lt;div class="sort"&gt;
              &lt;input type="text" name="Start" value="" class="address" /&gt;
          &lt;/div&gt;
          &lt;div class="sort"&gt;
              &lt;input type="text" name="End" value="" class="address" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="submit" value="Get Route!" onclick="showLocation(); return false;" /&gt;
      &lt;input type="submit" value="Add Step" onclick="addStep(); return false;" /&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>