Add delete button to all forms, closes #1492

css/app.css

@@ -876,6 +876,15 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     height: 100%;
     border: 1px solid #CCC;
     border-radius: 0 3px 3px 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10%;
+    background: #fafafa;
+}
+
+.preset-list-item button.tag-reference-button .icon {
+    opacity: .5;
 }
 
 .current .preset-list-button,
@@ -1006,22 +1015,52 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     border-radius: 4px 4px 0 0;
 }
 
+.form-label-button-wrap {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    text-align: right;
+}
+
+.form-label-button-wrap .icon {
+    opacity: .5;
+}
+
 .form-label button {
     border-left: 1px solid #CCC;
+    width: 10%;
+    height: 100%;
+    display: inline-block;
+    border-radius: 0;
+    background: #fafafa;
 }
 
 .form-label .modified-icon {
     border-right: 0;
-    opacity: 0;
+    display: none;
     z-index: -10;
     right: 10%;
 }
 
 .modified .form-label .modified-icon {
+    display: inline-block;
     opacity: 1;
     z-index: 1;
 }
 
+.present .form-label .remove-icon {
+    display: inline-block;
+    z-index: 1;
+}
+
+.form-field .remove-icon {
+    border-radius: 0 0 4px 0;
+    display: none;
+}
+
 .form-label button.tag-reference-button {
     border-top-right-radius: 3px;
 }
@@ -1039,10 +1078,6 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     height: 65px;
 }
 
-.form-field button.remove {
-    border-radius: 0 0 4px 0;
-}
-
 .inspector-border {
     border-bottom: 1px solid #CCC
 }
@@ -1087,6 +1122,8 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 .inspector-hover .spin-control,
 .inspector-hover .hide-toggle:before,
 .inspector-hover .more-buttons,
+.inspector-hover .form-label-button-wrap button,
+.inspector-hover .tag-reference-button,
 .inspector-hover .view-on-osm {
     opacity: 0;
 }
@@ -1653,6 +1690,10 @@ div.combobox {
 
 .tag-row .tag-reference-button {
     right: 0;
+    border-radius: 0;
+    width: 10%;
+    top: 0;
+    background: #fafafa;
 }
 
 /* Adding form fields to tag editor */

js/id/ui/preset.js

@@ -42,6 +42,20 @@ iD.ui.preset = function(context) {
             return t;
         };
 
+        field.present = function() {
+            return _.any(field.keys, function(key) {
+                return tags[key];
+            });
+        };
+
+        field.remove = function() {
+            var t = {};
+            field.keys.forEach(function(key) {
+                t[key] = undefined;
+            });
+            return t;
+        };
+
         return field;
     }
 
@@ -94,14 +108,24 @@ iD.ui.preset = function(context) {
             .attr('for', function(field) { return 'preset-input-' + field.id; })
             .text(function(field) { return field.label(); });
 
-        $label.append('button')
-            .attr('class', 'modified-icon minor')
+        var wrap = $label.append('div')
+            .attr('class', 'form-label-button-wrap');
+
+        wrap.append('button')
+            .attr('class', 'remove-icon')
+            .append('span').attr('class', 'icon delete');
+
+        wrap.append('button')
+            .attr('class', 'modified-icon')
             .attr('tabindex', -1)
             .append('div')
             .attr('class', 'icon undo');
 
         // Update
 
+        $fields.select('.form-label-button-wrap .remove-icon')
+            .on('click', remove);
+
         $fields.select('.modified-icon')
             .on('click', revert);
 
@@ -110,6 +134,9 @@ iD.ui.preset = function(context) {
             .classed('modified', function(field) {
                 return field.modified();
             })
+            .classed('present', function(field) {
+                return field.present();
+            })
             .each(function(field) {
                 var reference = iD.ui.TagReference({key: field.key});
 
@@ -120,7 +147,7 @@ iD.ui.preset = function(context) {
                 d3.select(this)
                     .call(field.input)
                     .call(reference.body)
-                    .select('.form-label')
+                    .select('.form-label-button-wrap')
                     .call(reference.button);
 
                 field.input.tags(tags);
@@ -163,6 +190,12 @@ iD.ui.preset = function(context) {
             d3.event.preventDefault();
             event.change(field.revert());
         }
+
+        function remove(field) {
+            d3.event.stopPropagation();
+            d3.event.preventDefault();
+            event.change(field.remove());
+        }
     }
 
     presets.preset = function(_) {

js/id/ui/tag_reference.js

@@ -104,7 +104,7 @@ iD.ui.TagReference = function(tag) {
 
         var enter = button.enter().append('button')
             .attr('tabindex', -1)
-            .attr('class', 'tag-reference-button minor');
+            .attr('class', 'tag-reference-button');
 
         enter.append('span')
             .attr('class', 'icon inspect');