user deselect, then remove item from array and arrange depends on how they were selected

Question

How could I remove item in an array if the user changes its selected options from select element? and at the same time arrange the selected options on how they were selected by the user. for example they were selected as 3, 1, 4, 2.

this is my code in javascript

    <script>
            var selected_id = [];
            $(document).on('click','.clickable',function(e){
            selected_id.push($(this).attr('id'));
            console.log(selected_id);
            }).get().join(", "); 
            $("#gen-btn").click(function(){
                event.preventDefault();
                 $.ajax({
                    url: "<?php echo base_url('reports/generate_imported'); ?>",
                    data: {selected_id: selected_id},
                    type: "POST",
                    success: function(result){
                        alert(result);
                    }
                }); 
                return false; 

             });

        </script>

here is my code in view page

            <select class="form-control reports" name="cols[]" multiple="multiple" id="cols[]" required="required">
                        <option id="1" class="clickable" value="1">item 1</option>
                        <option id="2" class="clickable" value="2">item 2</option>
                        <option id="3" class="clickable" value="3">item 3</option>
                        <option id="4" class="clickable" value="4">item 4</option></select>

thanks to @itsgoingdown, got my desired behavior of removing item from array, but I want them to be arranged on how they were selected. like for example 3, 1, 4, 2.

Answer 1

Here is the code

  var selected_id = [];
  var selected_ord=[];
        $(document).on('click','.clickable',function(e){

          var ops= $(this).parent().find(":selected").length;

         if($(e.target).is(':selected')){


         selected_ord.push($(e.target).attr('id'));

 selected_id=selected_ord.slice(selected_ord.length-ops, selected_ord.length);          

         }


     else {

           var toRemove=selected_ord.lastIndexOf($(e.target).attr('id'));

         selected_ord.splice(toRemove ,1);
       var index = selected_id.indexOf($(e.target).attr('id'));  
       selected_id.splice(index, 1);

     } 

          console.log(selected_id); 

            }).get().join(", "); 
            $("#gen-btn").click(function(){
                event.preventDefault();
                 $.ajax({
                    url: "<?php echo base_url('reports/generate_imported'); ?>",
                    data: {selected_id: selected_id},
                    type: "POST",
                    success: function(result){
                        alert(result);
                    }
                }); 



                return false; 

             });
             $("#gen-btn").click(function(){
                selected_id.length = 0;
             });

Here is the testing example Example

Answer 2

Let say:

var selected_id = ["1", "2", "3"]

Firstly, on click event you need to search on array (selected_id) using the value/id you get from $(this).attr('id'):

selected_id.indexOf("1"); # this will return 0

Meaning if you get value greater than or equal to zero (>= 0), item is exists in array (selected_id)

Finally, you can remove it by setting the index like:

selected_id.remove(1);

return value is:  ["1", "3"]

Try to make a function if you like:

function deleteFromArray(params_array, index){
  var result = new Array();
  for(var i in params_array){
    if(params_array[i] == index){
      continue;
    }
    result.push(params_array[i]);
  }
  return result;
}


deleteFromArray(selected_id , 0);
returns: selected_id = ["2", "3"];