diff --git a/ui/src/shared/actions/annotations.js b/ui/src/shared/actions/annotations.js
index 84554da58..5005b0e28 100644
--- a/ui/src/shared/actions/annotations.js
+++ b/ui/src/shared/actions/annotations.js
@@ -67,3 +67,8 @@ export const getAnnotationsAsync = (indexUrl, since) => async dispatch => {
   const annotations = await api.getAnnotations(indexUrl, since)
   annotations.forEach(a => dispatch(addAnnotation(a)))
 }
+
+export const deleteAnnotationAsync = annotation => async dispatch => {
+  await api.deleteAnnotation(annotation)
+  dispatch(deleteAnnotation(annotation))
+}
diff --git a/ui/src/shared/apis/annotation.js b/ui/src/shared/apis/annotation.js
index f138edacc..993db2de3 100644
--- a/ui/src/shared/apis/annotation.js
+++ b/ui/src/shared/apis/annotation.js
@@ -27,3 +27,8 @@ export const getAnnotations = async (url, since) => {
   })
   return data.annotations.map(annoToMillisecond)
 }
+
+export const deleteAnnotation = async annotation => {
+  const url = annotation.links.self
+  await AJAX({method: 'DELETE', url})
+}
diff --git a/ui/src/shared/components/Annotation.js b/ui/src/shared/components/Annotation.js
index 29e76c213..93e62d9da 100644
--- a/ui/src/shared/components/Annotation.js
+++ b/ui/src/shared/components/Annotation.js
@@ -122,18 +122,6 @@ class Annotation extends Component {
     onUpdateAnnotation(annotation)
   }
 
-  handleDeleteAnnotation = () => {
-    const {annotation, annotations, onDeleteAnnotation} = this.props
-
-    if (this.isEndpoint()) {
-      const startAnnotation = annotations.find(a => a.id === this.getStartID())
-
-      return onDeleteAnnotation(startAnnotation)
-    }
-
-    return onDeleteAnnotation(annotation)
-  }
-
   render() {
     const {dygraph, annotation, mode} = this.props
     const {isDragging, isMouseOver} = this.state
@@ -176,7 +164,6 @@ class Annotation extends Component {
           onMouseLeave={this.handleMouseLeave}
           annotationState={this.state}
           onConfirmUpdate={this.handleConfirmUpdate}
-          onDelete={this.handleDeleteAnnotation}
         />
       </div>
     )
@@ -191,7 +178,6 @@ Annotation.propTypes = {
   annotation: schema.annotation.isRequired,
   dygraph: shape({}).isRequired,
   onUpdateAnnotation: func.isRequired,
-  onDeleteAnnotation: func.isRequired,
 }
 
 export default Annotation
diff --git a/ui/src/shared/components/AnnotationTooltip.js b/ui/src/shared/components/AnnotationTooltip.js
index 076f39ea9..26434321e 100644
--- a/ui/src/shared/components/AnnotationTooltip.js
+++ b/ui/src/shared/components/AnnotationTooltip.js
@@ -1,8 +1,10 @@
 import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
 import moment from 'moment'
 
 import AnnotationInput from 'src/shared/components/AnnotationInput'
 import * as schema from 'shared/schemas'
+import * as actions from 'shared/actions/annotations'
 
 import {
   tooltipStyle,
@@ -35,6 +37,10 @@ class AnnotationTooltip extends Component {
     this.setState({annotation: this.props.annotation})
   }
 
+  handleDelete = () => {
+    this.props.deleteAnnotationAsync(this.props.annotation)
+  }
+
   render() {
     const {annotation} = this.state
     const {
@@ -57,7 +63,7 @@ class AnnotationTooltip extends Component {
               {isEditing &&
                 <button
                   className="annotation-tooltip--delete"
-                  onClick={this.props.onDelete}
+                  onClick={this.handleDelete}
                 >
                   <span className="icon remove" />
                 </button>}
@@ -89,7 +95,9 @@ AnnotationTooltip.propTypes = {
   onMouseLeave: func.isRequired,
   annotationState: shape({}),
   onConfirmUpdate: func.isRequired,
-  onDelete: func.isRequired,
+  deleteAnnotationAsync: func.isRequired,
 }
 
-export default AnnotationTooltip
+export default connect(null, {
+  deleteAnnotationAsync: actions.deleteAnnotationAsync,
+})(AnnotationTooltip)
diff --git a/ui/src/shared/components/Annotations.js b/ui/src/shared/components/Annotations.js
index 7355ce31c..ee92f338b 100644
--- a/ui/src/shared/components/Annotations.js
+++ b/ui/src/shared/components/Annotations.js
@@ -11,7 +11,6 @@ import {ADDING, TEMP_ANNOTATION} from 'src/shared/annotations/helpers'
 
 import {
   updateAnnotation,
-  deleteAnnotation,
   addingAnnotationSuccess,
   dismissAddingAnnotation,
   mouseEnterTempAnnotation,
@@ -34,7 +33,6 @@ class Annotations extends Component {
       mode,
       isTempHovering,
       handleUpdateAnnotation,
-      handleDeleteAnnotation,
       handleDismissAddingAnnotation,
       handleAddingAnnotationSuccess,
       handleMouseEnterTempAnnotation,
@@ -72,7 +70,6 @@ class Annotations extends Component {
             dygraph={dygraph}
             annotations={annotations}
             onUpdateAnnotation={handleUpdateAnnotation}
-            onDeleteAnnotation={handleDeleteAnnotation}
           />
         )}
         {annotations.filter(a => !a.id.includes('-end')).map((a, i) => {
@@ -93,7 +90,6 @@ Annotations.propTypes = {
   mode: string,
   isTempHovering: bool,
   annotationsRef: func,
-  handleDeleteAnnotation: func.isRequired,
   handleUpdateAnnotation: func.isRequired,
   handleDismissAddingAnnotation: func.isRequired,
   handleAddingAnnotationSuccess: func.isRequired,
@@ -127,7 +123,6 @@ const mapDispatchToProps = dispatch => ({
     dispatch
   ),
   handleUpdateAnnotation: bindActionCreators(updateAnnotation, dispatch),
-  handleDeleteAnnotation: bindActionCreators(deleteAnnotation, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Annotations)