Remove option element JQuery by selecting the option element

This is another article which is aiming to describe how to remove an option element using JQuery by selecting the option element itself so it will be automatically from its parent, the select HTML element. Another similar article has already been written which has the same purpose with this article. The purpose of the article titled ‘Remove option element JQuery by clicking the button’ which can be visited in this link is also trying to describe how to remove an option element using JQuery. The different part is on how it is being removed. The article titled ‘Remove option element JQuery by clicking the button’ in this link is removing the option element by detecting a clicked button event. In this article, the removal process of the option element is done by selecting the option element itself.

Below is the actual snippet code depicting HTML element which is actually similar with the one given in the article titled ‘Remove option element JQuery by clicking the button’ in this link. It is the select HTML element which contains the option HTML element as shown below :

<select id="list_selection"> </select>

The option HTML element inside the select HTML element can be generated by using an associative array variable as the component of its value as stated in the article titled ‘Add select option JQuery from Array Variable’ in this link.

So, after generating the option HTML element inside the select HTML element as previously stated using the technique stated in the article titled ‘Add select option JQuery from Array Variable’ in this link or any other technique available, the next step is to add a line or a snippet code for removing the selected option. Below is the way to do it which is adding the following line of script :

$('#list_selection').click(function(){
$('option:selected', this).remove();
});

The above snippet code can be translated as every click event triggered in the unordered list with the id of list_selection try to detect any option HTML element selected inside of the unordered list associated and then remove it.