diff --git a/dev/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
index ef033ab..33953b5 100644
--- a/dev/js/spec/vcSpec.js
+++ b/dev/js/spec/vcSpec.js
@@ -827,7 +827,7 @@
     });
 
     
-    it('should be replaceable by a docGroupRef', function () {
+    it('should be replaceable by docGroupRef with deletion', function () {
       var vc = vcClass.create().fromJson({
         "@type" : "koral:doc",
         "key":"Titel",
@@ -854,9 +854,82 @@
 
       expect(vcE.firstChild.firstChild.textContent).toEqual("referTo");
       expect(vcE.firstChild.children[1].getAttribute("data-type")).toEqual("string");
+
       expect(vcE.firstChild.children.length).toEqual(3);
       expect(vcE.firstChild.children[1].classList.contains("unspecified")).toBeTruthy();      
     });
+
+
+    it('should be replaceable by docGroupRef on root', function () {
+      var vc = vcClass.create().fromJson({
+        "@type" : "koral:doc",
+        "key":"Titel",
+        "value":"Baum",
+        "match":"match:eq"
+      });
+
+      expect(vc.toQuery()).toEqual("Titel = \"Baum\"");
+
+      var vcE = vc.builder();
+      expect(vcE.firstChild.children.length).toEqual(4);
+
+      // Click on the key
+      vcE.firstChild.firstChild.click();
+
+      expect(vcE.firstChild.getElementsByTagName("LI")[0].textContent).toEqual("referTo");
+
+      // Click on referTo
+      vcE.firstChild.getElementsByTagName("LI")[0].click();
+
+      // Now it's a referTo element
+      expect(vcE.firstChild.firstChild.textContent).toEqual("referTo");
+      expect(vcE.firstChild.children.length).toEqual(3);
+      expect(vcE.firstChild.children[1].classList.contains("unspecified")).toBeTruthy();
+    });
+
+    it('should be replaceable by docGroupRef nested', function () {
+      var vc = vcClass.create().fromJson({
+        "@type" : "koral:docGroup",
+        "operation" : "operation:and",
+        "operands" : [
+          {
+            "@type": 'koral:doc',
+            "key" : 'author',
+            "match": 'match:eq',
+            "value": 'Max Birkendale',
+            "type": 'type:string'
+          },
+          {
+            "@type": 'koral:doc',
+            "key": 'pubDate',
+            "match": 'match:eq',
+            "value": '2014-12-05',
+            "type": 'type:date'
+          }
+        ]
+      });
+
+      expect(vc.toQuery()).toEqual("author = \"Max Birkendale\" & pubDate in 2014-12-05");
+
+      var vcE = vc.builder();
+
+      // First doc
+      var doc = vcE.firstChild.firstChild;
+      expect(doc.children.length).toEqual(4);
+
+      // Click on the key
+      doc.firstChild.click();
+
+      expect(doc.getElementsByTagName("LI")[0].textContent).toEqual("referTo");
+      
+      // Click on referTo
+      vcE.firstChild.getElementsByTagName("LI")[0].click();
+
+      // Now it's a referTo element
+      expect(vcE.firstChild.firstChild.firstChild.textContent).toEqual("referTo");
+      expect(vcE.firstChild.firstChild.children.length).toEqual(3);
+      expect(vcE.firstChild.firstChild.children[1].classList.contains("unspecified")).toBeTruthy();
+    });
   });
 
   describe('KorAP.DocGroup element', function () {
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 821aa64..996c347 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -6,8 +6,9 @@
   'vc/jsonld',
   'vc/rewritelist',
   'vc/stringval',
+  'vc/docgroupref',
   'util'
-], function (jsonldClass, rewriteListClass, stringValClass) {
+], function (jsonldClass, rewriteListClass, stringValClass, docGroupRefClass) {
 
   /*
    * TODO:
@@ -178,6 +179,20 @@
       return parent.replaceOperand(this, group).update();
     },
 
+    replaceWith : function (op) {
+      var p = this.parent();
+
+      if (p.ldType() === 'docGroup') {
+        p.replaceOperand(this,op);
+      }
+      else if (p.ldType() == null) {
+        p.root(op);
+      };
+      p.update();
+
+      this.destroy();
+    },
+    
     /**
      * Deserialize from json
      */
@@ -372,14 +387,22 @@
       // Release event
       var that = this;
       menu.released(function (key, type) {
-        var doc = that.key(key).type(type);
 
-        // This may not be compatible - then switch to default
-        doc.matchop(doc.matchop());
-        doc.value(doc.value());
+        if (type === 'ref') {
+          // KorAP._delete.bind(that);
+          var ref = docGroupRefClass.create(that.parent());
+          that.replaceWith(ref);
+        }
+        else {
+          var doc = that.key(key).type(type);
 
-        // Update the doc
-        doc.update();
+          // This may not be compatible - then switch to default
+          doc.matchop(doc.matchop());
+          doc.value(doc.value());
+
+          // Update the doc
+          doc.update();
+        };
 
         // hide!
         this.hide();