title: How to remove the selected element during a clone() operation
body: <p>I have a select box that gets cloned. I want to remove the user's previous selection from each cloned select box. Here is the method that does the <code>clone()</code> :</p>
  
  <pre><code>function addselect(s){
     $('#product_categories &gt; .category_block:last').after(
        $('#product_categories &gt; .category_block:last').clone()
     );
     set_add_delete_links();
     return false;
  }
  
  function set_add_delete_links(){
      $('.remove_cat').show();
      $('.add_cat').hide();
      $('.add_cat:last').show();
      $("#product_categories &gt; .category_block:only-child &gt; .remove_cat").hide();
  }
  
  function removeselect(s){
      $(s).parent().remove(); 
      set_add_delete_links(); 
      return false;
  }
  </code></pre>
  
  <p>This kinda works but doesn't remove the last selected:</p>
  
  <pre><code> $('#product_categories &gt; .category_block:last option:selected').remove(); 
  </code></pre>
  
  <p>Here is the HTML</p>
  
  <pre><code>&lt;div id="product_categories"&gt;
  &lt;div class="category_block"&gt;
      &lt;select name="category_ids[]" id="cat_list"&gt;
          &lt;option  value=""&gt;Select Attribute&lt;/option&gt;
          &lt;option  value="1770"&gt;Foo0&lt;/option&gt;
          &lt;option  value="1773"&gt;Foo1&lt;/option&gt;
          &lt;option  value="1775"&gt;Foo2&lt;/option&gt;
          &lt;option  value="1765"&gt;Foo3&lt;/option&gt;
          &lt;option  value="1802"&gt;Foo4&lt;/option&gt;
          &lt;option  value="1766"&gt;Foo5&lt;/option&gt;
      &lt;/select&gt;
      &lt;input class="specsinput" type="text" name="specs[]" value="" /&gt;
      &lt;a href="#" onClick="return removeselect(this);" class="remove_cat"&gt; [-] &lt;/a&gt;
      &lt;a href="#" onClick="return addselect(this);" class="add_cat"&gt; [+] &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>