4 files changed, 38 insertions, 15 deletions
diff --git a/client/css/post-metric-input.styl b/client/css/post-metric-input.styl
index 1a2f07f..2d4046b 100644
--- a/client/css/post-metric-input.styl
+++ b/client/css/post-metric-input.styl
@@ -24,6 +24,10 @@ ul.compact-unset-metrics, ul.compact-post-metrics
         a:focus
             outline: 0
             box-shadow: inset 0 0 0 2px $main-color
+        .remove-metric
+            color: $inactive-link-color
+            unselectable()
+            margin-right: 0.5em
     i
         padding-right: 0.4em
     .metric-bounds
diff --git a/client/html/compact_post_metric_list_item.tpl b/client/html/compact_post_metric_list_item.tpl
index 75b5d81..b0dca33 100644
--- a/client/html/compact_post_metric_list_item.tpl
+++ b/client/html/compact_post_metric_list_item.tpl
@@ -1,5 +1,6 @@
 <li><!--
 --><% if (ctx.editMode) { %><!--
+    --><a class='remove-metric' data-pseudo-content='×'/><!--
     --><a href="<%- ctx.formatClientLink('posts', {
                 query: 'metric-' + ctx.escapeColons(ctx.postMetric.tagName) +
                     ':' + ctx.postMetric.value
diff --git a/client/html/compact_post_metric_range_list_item.tpl b/client/html/compact_post_metric_range_list_item.tpl
index 4768935..96661ce 100644
--- a/client/html/compact_post_metric_range_list_item.tpl
+++ b/client/html/compact_post_metric_range_list_item.tpl
@@ -1,5 +1,6 @@
 <li><!--
 --><% if (ctx.editMode) { %><!--
+    --><a class='remove-metric' data-pseudo-content='×'/><!--
     --><a href="<%- ctx.formatClientLink('posts', {
                 query: 'metric-' + ctx.escapeColons(ctx.postMetricRange.tagName) +
                     ':' + ctx.postMetricRange.low + '..' + ctx.postMetricRange.high
diff --git a/client/js/controls/post_metric_input_control.js b/client/js/controls/post_metric_input_control.js
index 4d0f0ad..42b78d6 100644
--- a/client/js/controls/post_metric_input_control.js
+++ b/client/js/controls/post_metric_input_control.js
@@ -88,11 +88,14 @@ class PostMetricInputControl extends events.EventTarget {
             postMetric: pm,
             tag: tag,
         });
-        node.querySelector('input[name=value]')
-            .addEventListener('change', e => {
-                pm.value = e.target.value;
-                this.dispatchEvent(new CustomEvent('change'));
-            });
+        node.querySelector('input[name=value]').addEventListener('change', e => {
+            pm.value = e.target.value;
+            this.dispatchEvent(new CustomEvent('change'));
+        });
+        node.querySelector('.remove-metric').addEventListener('click', e => {
+            e.preventDefault();
+            this.deletePostMetric(pm);
+        });
         return node;
     }
 
@@ -103,16 +106,18 @@ class PostMetricInputControl extends events.EventTarget {
             postMetricRange: pmr,
             tag: tag,
         });
-        node.querySelector('input[name=low]')
-            .addEventListener('change', e => {
-                pmr.low = e.target.value;
-                this.dispatchEvent(new CustomEvent('change'));
-            });
-        node.querySelector('input[name=high]')
-            .addEventListener('change', e => {
-                pmr.high = e.target.value;
-                this.dispatchEvent(new CustomEvent('change'));
-            });
+        node.querySelector('input[name=low]').addEventListener('change', e => {
+            pmr.low = e.target.value;
+            this.dispatchEvent(new CustomEvent('change'));
+        });
+        node.querySelector('input[name=high]').addEventListener('change', e => {
+            pmr.high = e.target.value;
+            this.dispatchEvent(new CustomEvent('change'));
+        });
+        node.querySelector('.remove-metric').addEventListener('click', e => {
+            e.preventDefault();
+            this.deletePostMetricRange(pmr);
+        });
         return node;
     }
 
@@ -135,6 +140,18 @@ class PostMetricInputControl extends events.EventTarget {
         this.refreshContent();
         this.dispatchEvent(new CustomEvent('change'));
     }
+
+    deletePostMetric(pm) {
+        this._post.metrics.remove(pm);
+        this.refreshContent();
+        this.dispatchEvent(new CustomEvent('change'));
+    }
+
+    deletePostMetricRange(pmr) {
+        this._post.metricRanges.remove(pmr);
+        this.refreshContent();
+        this.dispatchEvent(new CustomEvent('change'));
+    }
 }
 
 module.exports = PostMetricInputControl;