How to remove the selected element during a clone() operation

Question

Hi All,

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 clone() :

function addselect(s){
 $('#product_categories > .category_block:last').after(
    $('#product_categories > .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 > .category_block:only-child > .remove_cat").hide(); }

function removeselect(s){ $(s).parent().remove(); set_add_delete_links(); return false; }

This kinda works but doesn't remove the last selected:

 $('#product_categories > .category_block:last option:selected').remove(); 

Here is the HTML

<div id="product_categories">
<div class="category_block">
    <select name="category_ids[]" id="cat_list">
        <option  value="">Select Attribute</option>
        <option  value="1770">Foo0</option>
        <option  value="1773">Foo1</option>
        <option  value="1775">Foo2</option>
        <option  value="1765">Foo3</option>
        <option  value="1802">Foo4</option>
        <option  value="1766">Foo5</option>
    </select>
    <input class="specsinput" type="text" name="specs[]" value="" />
    <a href="#" onClick="return removeselect(this);" class="remove_cat"> [-] </a>
    <a href="#" onClick="return addselect(this);" class="add_cat"> [+] </a>
</div>

Answer 1

You can save the cloned element to a variable that you manipulate before you insert it in the DOM. or re-select the new cloned element after it has been inserted and do the manipulations

See http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery on how to de-selecting

Answer 2

You need to clone the proper element, set the selected value for the clone, then append the clone.

function addselect(s){

        // Store the block in a variable
    var $block = $('#product_categories > .category_block:last');

        // Grab the selected value
    var theValue = $block.find(':selected').val();

        // Clone the block 
    var $clone = $block.clone();

        // Find the selected value in the clone, and remove
    $clone.find('option[value=' + theValue + ']').remove();

        // Append the clone
    $block.after($clone); 

    set_add_delete_links(); return false;
}

UPDATE: Modified to fit HTML added to question.

Please note, the ID of the select element is being cloned, which means you have 2 elements with the same ID. This is not allowed. You'll need to get rid of the ID, or change it in the clone to some other value.

You could do something like this before you append the clone:

    // Grab the select in the clone
var $select = $clone.find('select');

    // Update its ID by concatenating theValue to the current ID
$select.attr('id', $select.attr('id') + theValue);