Is there a way to clear all option and optgroup HTML elements by using jquery?

My HTML select element is like this,

<select id="users" name="multiselect" multiple="multiple" style="width:382px;" >
    <optgroup id="groupadmin" label="Group Admin"></optgroup>
    <optgroup id="systemusers" label="System User"></optgroup>
</select>

Is there a way to clear all option and optgroup HTML elements by using jquery?

My HTML select element is like this,

<select id="users" name="multiselect" multiple="multiple" style="width:382px;" >
    <optgroup id="groupadmin" label="Group Admin"></optgroup>
    <optgroup id="systemusers" label="System User"></optgroup>
</select>

• javascript
• jquery
• html
• jquery-ui-multiselect

• Yes there is; have you tried anything? – Ja͢ck Commented Jun 26, 2014 at 11:58
• I have tried following ways, $('#users').empty(); $('#users').find('optgroup,option').remove(); $('#users').html($('#users').html().replace('selected','')); – Kanishka Commented Jun 26, 2014 at 12:06

3 Answers 3

You can use .empty()

Description: Remove all child nodes of the set of matched elements from the DOM.

Code

$('#users').empty()

Fiddle

EDIT

As you are using multiSelect plugin, You need to use .multiSelect('refresh') method.

$('#users').empty().multiSelect('refresh'); 

Updated Fiddle

Try this code

   $('#users').find('optgroup,option').remove();

Use the following code :

$('#users').children().remove();

This will work irrespective of whether an optgroup is present or not