remove-mod-btn-option-added

client/styles/global.scss

@@ -474,7 +474,7 @@ a {
 }
 
 .plusbuttoncontainer {
-	width: 51px;
+	width: 102px;
 	height: 50px;
 }
 

client/views/create/create.html

@@ -13,6 +13,11 @@
 						<div class="instancemodsplus">
 							+
 						</div>
+						{{#if minusButton}}
+							<div class="instancemodsminus">
+								-
+							</div>
+						{{/if}}
 					</div>
 				</div>
 				<div class="dropdowncontainer">

client/views/create/create.js

@@ -14,6 +14,13 @@ Template.create.onRendered(() => {
 
 /* eslint-disable func-names, no-unused-vars */
 
+Template.create.helpers({
+  minusButton() {
+    const spacers = document.getElementsByClassName('emptyinputspacer');
+    return spacers.length === 1;
+  },
+});
+
 Template.create.events({
   'click .checkbox': function (event, template) {
     // console.log(event);
@@ -53,14 +60,27 @@ Template.create.events({
       $('.instancemodsinput').removeClass('lastmodinput');
       $('.plusbuttoncontainer').removeClass('lastmodinput');
       $('.instancemodsplus').remove();
-      $('<input class="instancemodsinput lastmodinput" type="text" placeholder="Moderator email..."><div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div></div></div>').insertAfter('.lastinputspacer').last();
+      $('.instancemodsminus').remove();
+      $('<input class="instancemodsinput lastmodinput" type="text" placeholder="Moderator email..."><div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div><div class="instancemodsminus">-</div></div></div>').insertAfter('.lastinputspacer').last();
       $('.lastinputspacer').first().removeClass('lastinputspacer');
       $('#instancebottominputcontainer').height((index, height) => (height + 50));
     } else {
       showCreateError("You've reached the maximum # of moderators (4).");
       return false;
     }
   },
+  'click .instancemodsminus': function (event, template) {
+    const instancemodsinput = document.getElementsByClassName('instancemodsinput');
+    const spacers = document.getElementsByClassName('emptyinputspacer');
+    spacers[spacers.length - 2].parentNode.removeChild(spacers[spacers.length - 2]);
+    instancemodsinput[instancemodsinput.length - 1].parentNode.removeChild(instancemodsinput[instancemodsinput.length - 1]);
+    if (spacers.length === 1) {
+      $('<div class="emptyinputspacer lastinputspacer"><div class="plusbuttoncontainer"><div class="instancemodsplus">+</div></div></div>').insertAfter('.lastinputspacer').last();
+      $('.lastinputspacer').first()[0].remove();
+    } else {
+      instancemodsinput[instancemodsinput.length - 2].classList.add('lastmodinput');
+    }
+  },
   'click #buttonarea': function (event, template) {
     if (!Meteor.user()) {
       return false;

client/views/delete/delete.scss

@@ -26,3 +26,21 @@
 		}
 	}
 }
+
+.instancemodsminus {
+	width: 31px;
+	float: left;
+	height: 30px;
+	margin: 10px;
+	background-color: #d82727;
+	border-radius: 5px;
+	color: white;
+	font-weight: 700;
+	text-align: center;
+	font-size: 23px;
+	cursor: pointer;
+
+  &:hover {
+		background-color: #ea6153;
+	}
+}