Remove list item and add to select option using JQuery

By Posted on

This article is written with the purpose of describing how to do as specify in the title of this article which is to remove list item HTML element and then add another HTML element in form of option HTML element using JQuery. The option HTML element will have the attribute and label as possessed or owned by the previous list item HTML element which has already been removed previously.

So, in term of sequence activity taken to aim the scenario described in the first paragraph, below are the steps taken :

1. Retrieve the value which is possessed by the soon-going-to-be-removed list item HTML element. It is shown as follows in the form of line of code : 

  var element_text = $(this).text();
  var element_value = $(this).val();

2. After successfully retrieving the value in form of additional parameter or attribute possessed by the list item which is going to be removed and also the label or text which is owned by the list item, pass it to the soon-going-to-be-added option HTML element as shown below : 

$('#list_selection').append("<option value="+element_value+">"+element_text+"</option");

or it can be added using the following line of code : 

$('#list_selection').append(new Option(element_text, element_value));

Adding option HTML element can be seen on how to execute it in the article titled ‘Add a single option element to select JQuery’ which is happened to be exist in this link.

To add the option HTML element into the right select HTML element, try to locate or to identify the id of the select HTML element itself. In this context, the select HTML element is located in the HTML web-page script as follows : 

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

As shown in the above snippet code, the select HTML element has the id of ‘list_selection’. It is suitable with the one defined in the earlier snippet code on adding option HTML element. It is precisely pointed out in this line of code : 

$('#list_selection').append ......................

It is appending an option HTML element in a select HTML element with the id of ‘list_selection’.

3. After successfully added the option HTML element, the last step is about removing the list item HTML element. Below is the script which is use to remove it : 

$('#list_selection_sample').on('click','li',function(){
      $(this).remove();
});

To remove the correct HTML element which is contained in an unordered list item HTML element, first of all try to figure it out the id of the list item HTML element. In this context, it can be shown in the following snippet code : 

<div id="div_selection_sample">
     <ul id="list_selection_sample">
     </ul>
</div>

The removal process itself can be found in the article titled ‘Remove list item HTML element using JQuery’ which can be found in the following link. The complete snippet code of JQuery which is aimed for adding an option HTML element inside a select HTML element. The option HTML element’s attribute is retrieved from an att item and remove can be found in as follows : 

$('#list_selection_sample').on('click','li',function(){
    var element_text = $(this).text();
    var element_value = $(this).val();
    $('#list_selection')
    .append("<option value="+element_value+">"+element_text+
    "</option"); 
    $(this).remove();
});

Or it can be defined as follows : 

$('#list_selection_sample').on('click','li',function(){
    var element_text = $(this).text();
    var element_value = $(this).val();
    $('#list_selection')
    .append(new Option(element_text, element_value));
    $(this).remove();
});

And the important HTML element which is needed to be declared for the above JQuery snippet code to be executed is shown below : 

<select id="list_selection">
     <li value="PostgreSQL">PostgreSQL</li>
</select>
<div id="div_selection_sample"> 
     <ul id="list_selection_sample"> </ul> 
</div>

The list item which is presented as an example above is only one list item as example to be removed.

Leave a Reply