Is there a way to remove optgroup without breaking the code?
All I was trying to do was edit some old code where I made a bunch of options, but now I would like to remove it. I can't just do it with css because it uses the plugin of choice.
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;
}
+3
source to share
3 answers
This allows you to remove all children of a optgroup
given element select
:
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/
+7
source to share
$("#mySelect").children().remove('optgroup[label=MyGroup2]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="mySelect">
<optgroup label="MyGroup">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</optgroup>
<optgroup label="MyGroup2">
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
</optgroup>
</select>
+1
source to share