Delete (Remove) selected Item (Option) from DropDownList using jQuery


The following HTML Markup consists of an HTML DropDownList (DropDown) control and a Button. When the Button is clicked, the jQuery click event handler is executed. Inside this event handler, the selected item (option) of HTML DropDownList (DropDown) control is removed (deleted).



Html

<select id="tutorials" style="width: 150px;">
    <option value="0">Please select</option>
    <option value="1">Html</option>
    <option value="2">CSS </option>
    <option value="3">jQuery</option>
    <option value="4">javascript</option>
    <option value="5">wordpress</option>
    <option value="6">drupal</option> 
</select>
<br /> 
<input type="button" id="btnReset" value="Reset" />

jQuery

<script type="text/javascript">
    $(function () {
        $("#btnDelete").bind("click", function () {
            $("#tutorials option:selected").remove();
        });
    });
</script>




Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.