$(document).ready(function(){ $('#btnRemoveSel').click(function(){ $('#ddlList option:selected').remove(); }); $('#btnRemoveByVal').click(function(){ $('#ddlList option[value="3"]').remove(); }); $('#btnRemoveByText').click(function(){ $('#ddlList option:contains("HTML")').remove(); }); $('#btnRemoveAllExceptFirst').click(function(){ $('#ddlAnotherList option:not(:first)').remove(); }); $('#btnRemoveAllExceptLast').click(function(){ $('#ddlRemoveExcludingLast option:not(:last)').remove(); }); $('#btnRemoveAll').click(function(){ $("#ddlRemoveAll").empty(); }); $('#btnResetPage').click(function(){ var options = '<option value="1">ASP.NET</option>' + '<option value="2">C#</option>' + '<option value="3">VB.NET</option>' + '<option value="4">HTML</option>' + '<option value="5">jQuery</option>'; $('select').empty(); $('select').append(options); }); });
<select id="ddlList"> <option value="1">ASP.NET</option> <option value="2">C#</option> <option value="3">VB.NET</option> <option value="4">HTML</option> <option value="5">jQuery</option> </select> <br/><br/> <input type="button" id="btnRemoveSel" Value="Remove selected item" /> <input type="button" id="btnRemoveByVal" Value="Remove Item by Value" /> <input type="button" id="btnRemoveByText" Value="Remove Item by Text" /> <br/><br/> <select id="ddlAnotherList"> <option value="1">ASP.NET</option> <option value="2">C#</option> <option value="3">VB.NET</option> <option value="4">HTML</option> <option value="5">jQuery</option> </select> <input type="button" id="btnRemoveAllExceptFirst" Value="Remove all items excluding first item" /> <br/><br/> <select id="ddlRemoveExcludingLast"> <option value="1">ASP.NET</option> <option value="2">C#</option> <option value="3">VB.NET</option> <option value="4">HTML</option> <option value="5">jQuery</option> </select> <input type="button" id="btnRemoveAllExceptLast" Value="Remove all items excluding Last item" /> <br/><br/> <select id="ddlRemoveAll"> <option value="1">ASP.NET</option> <option value="2">C#</option> <option value="3">VB.NET</option> <option value="4">HTML</option> <option value="5">jQuery</option> </select> <input type="button" id="btnRemoveAll" Value="Remove All" /> <br/><br/><br/> <input type="button" id="btnResetPage" Value="Reset All" />