diff --git a/static/js/annotation.js b/static/js/annotation.js
index 8003e73..8b63d6f 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -49,6 +49,12 @@ oml.ui.annotation = function(annotation, $iframe) {
         'OxSelectable OMLAnnotation'
     ).css({
         borderBottom: '1px solid rgb(208, 208, 208)',
+    }).bindEvent({
+        key_delete: function() {
+            that.triggerEvent('delete', {
+                id: annotation.id
+            })
+        }
     }).append($quote).append($note);
 
     that.annotate = function() {
@@ -63,6 +69,7 @@ oml.ui.annotation = function(annotation, $iframe) {
         let selected = document.querySelector('.OMLAnnotation.selected')
         selected && selected.classList.remove('selected')
         that.addClass('selected')
+        that.gainFocus()
     }
     return that;
 };
diff --git a/static/js/viewer.js b/static/js/viewer.js
index 848364a..ca78003 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -63,6 +63,10 @@ oml.ui.viewer = function() {
             console.log('change...')
             console.log(annotations)
             saveAnnotations()
+        },
+        'delete': function(data) {
+            oml.$ui.annotationFolder.find('#a-' + data.id).remove()
+            that.postMessage('removeAnnotation', data)
         }
     }
 
diff --git a/static/reader/epub.js b/static/reader/epub.js
index f3a56ad..1372628 100644
--- a/static/reader/epub.js
+++ b/static/reader/epub.js
@@ -23,6 +23,8 @@ Ox.load({
                 annotations.push(annotation)
                 renderAnnotation(annotation)
             })
+        } else if (event == 'removeAnnotation') {
+            removeAnnotation(data.id)
         }
     })
 })
@@ -47,12 +49,15 @@ function deselectAnnotation(id) {
     })
 }
 
-function removeAnnotation(a) {
-    annotations = annotations.filter(function(annotation) {
-        return annotation.cfiRange != a.dataset.epubcfi
-    })
-    reader.rendition.annotations.remove(a.dataset.epubcfi)
-    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
+function removeAnnotation(id) {
+    var a = annotations.filter(function(a) { return a.id == id })[0]
+    if (a) {
+        annotations = annotations.filter(function(annotation) {
+            return annotation.id != id
+        })
+        reader.rendition.annotations.remove(a.cfiRange)
+    }
+    Ox.$parent.postMessage('removeAnnotation', {id: id})
 }
 
 function renderAnnotation(annotation) {
@@ -98,7 +103,7 @@ document.onreadystatechange = function () {
         reader.rendition.on('keydown', function(event) {
             if (event.key == 'Delete') {
                 document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
-                    removeAnnotation(a)
+                    removeAnnotation(a.dataset.id)
                 })
             }
             if (event.key == 'n') {
diff --git a/static/reader/pdf.js b/static/reader/pdf.js
index 15b4487..44ae07b 100644
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@@ -32,6 +32,8 @@ Ox.load({
                 annotations.push(annotation)
                 renderAnnotation(annotation)
             })
+        } else if (event == 'removeAnnotation') {
+            removeAnnotation(data.id)
         }
     })
 })