ajax datasources: remove locally-cached 'option' HTML element during item unselection

src/js/select2/data/select.js

@@ -70,6 +70,14 @@ define([
   SelectAdapter.prototype.unselect = function (data) {
     var self = this;
 
+    // Remote-origin (AJAX) items: remove matching option elements from the DOM
+    if (this.options.get('ajax')) {
+      var $option = this.$element.find('option').filter(function (i, elm) {
+        return elm.value == data.id.toString();
+      });
+      $option.remove();
+    }
+
     if (!this.$element.prop('multiple')) {
       return;
     }

tests/integration-jq1.html

@@ -10,6 +10,7 @@
 
     <script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
     <script src="vendor/jquery-1.12.4.js" type="text/javascript"></script>
+    <script src="vendor/jquery.mockjax-2.6.0.js" type="text/javascript"></script>
     <script src="../dist/js/select2.full.js" type="text/javascript"></script>
 
     <script src="helpers.js" type="text/javascript"></script>

tests/integration-jq2.html

@@ -10,6 +10,7 @@
 
     <script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
     <script src="vendor/jquery-2.2.4.js" type="text/javascript"></script>
+    <script src="vendor/jquery.mockjax-2.6.0.js" type="text/javascript"></script>
     <script src="../dist/js/select2.full.js" type="text/javascript"></script>
 
     <script src="helpers.js" type="text/javascript"></script>

tests/integration-jq3.html

@@ -10,6 +10,7 @@
 
     <script src="vendor/qunit-1.23.1.js" type="text/javascript"></script>
     <script src="vendor/jquery-3.4.1.js" type="text/javascript"></script>
+    <script src="vendor/jquery.mockjax-2.6.0.js" type="text/javascript"></script>
     <script src="../dist/js/select2.full.js" type="text/javascript"></script>
 
     <script src="helpers.js" type="text/javascript"></script>

tests/integration/select2-methods.js

@@ -137,3 +137,60 @@ test('multiple value matches the jquery value', function (assert) {
     'The values should match the jquery values'
   );
 });
+
+test('selection and clearing of data from ajax source', function (assert) {
+  var asyncDone = assert.async();
+
+  var dataURL = 'http://127.0.0.1/test';
+  $.mockjax({
+    url: dataURL,
+    responseText: {results: [{id: 6128, text: '6128'}]},
+    logging: 1
+  });
+
+  var $container = $('#qunit-fixture');
+  var $select = $('<select></select>');
+  $container.append($select);
+
+  var select = new Select2($select, {ajax: {url: dataURL}, multiple: true});
+
+  assert.equal(
+    $select.find(':selected').length,
+    0,
+    'No items should be selected'
+  );
+
+  // Open the dropdown menu, to perform an AJAX request
+  select.selection.trigger('query', {term: '6128'});
+
+  var selectionStatus = null;
+  select.on('results:all', function() {
+
+    // First call: select a result from the dropdown menu
+    if (selectionStatus === null) {
+
+      $('.select2-results__option').trigger('mouseup');
+      assert.equal(
+        $select.find('option').length,
+        1,
+        'An HTML option element should have been created for the item'
+      );
+
+      // Trigger a second call
+      selectionStatus = true;
+      select.selection.trigger('query', {term: '6128'});
+
+    // Second call: unselect the previously-selected item
+    } else if (selectionStatus == true) {
+
+      $('.select2-results__option[aria-selected=true]').trigger('mouseup');
+      assert.equal(
+        $select.find('option').length,
+        0,
+        'The previously-created HTML option element should have been removed'
+      );
+
+      asyncDone();
+    }
+  });
+});