Removed the option from select base on the option value in jquery

Question

Does anyone know how can I removed the option from select base on the option value in jquery?

example:

<select name="group_select">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

For this case, I would like to removed B by just clicked on a button and without selected the option. Will this possible that I can just removed that option by just based on the oprion value "a"??

Answer 1

Sorry if I don't understand you completely, but you just want to remove an element on a button click? In that case, you can do something like this:

HTML on your page:

<p>
    <input type="button" id="btnRemoveA" value="Remove A" />
</p>
<select name="group_select">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

Javascript:

<script type="text/javascript">
    $(function() {
        $("#btnRemoveA").click(function() {
            $("select[name=group_select] > option[value=a]").remove();
        });
    });
</script>

When your page loads, this will attach a click event to "btnRemoveA" that finds the select element with name "group_select" and then looks for a child option element with value "a". It then removes that option element.

The jQuery documentation page has a ton more information on the various selectors you can use: --> http://docs.jquery.com/Selectors