Is there a way to remove optgroup without destroying the code?

drop-down-menu, jquery

Solution

This works to remove all of the `optgroup` children of a given `select` element:

Markup:

<select id="mySelect">
    <optgroup label="MyGroup"></optgroup>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    <optgroup label="MyGroup2"></optgroup>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
</select>

jQuery:

 $(function () {
        $("#mySelect").children().remove("optgroup");
    });

jsFiddle: http://jsfiddle.net/frJEq/

Problem

All I was attempting was to edit some old code, where I had made an option group, but now I'd like to take it away. I can't just do it with css because it's using the chosen plugin. ``` function flavorChooser (title, item) { var title = 'hidden'; var optgroup = jQuery('<optgroup display="' + title + '"/>'); jQuery.each(item, function(sub_title, sub_item) { if (typeof sub_item[0] !== "undefined") { var opt = jQuery('<option value="' + sub_item[0] + '" data-store-locator-value="' + sub_item[0] + '">' + sub_title + '</option>'); optgroup.prepend(opt); } }); // console.log('chozen '); // jQuery('.chzn-container .chzn-results .group-result').css('display', 'none'); return optgroup; ``` }

Original source