Add remove button to "Add Moderators" view

client/styles/global.scss

@@ -502,6 +502,22 @@ a {
 	font-weight: 600;
 }
 
+.minusbutton {
+	display: inline-block;
+	width: 25px;
+	height: 25px;
+	border-radius: 2px;
+	cursor: pointer;
+	background-color: red;
+	margin-top: 15px;
+	color: white;
+	font-size: 18px;
+	padding-top: 0px;
+	text-align: center;
+	margin-left: 10px;
+	font-weight: 600;
+}
+
 .plusbuttoncontainer {
 	width: 51px;
 	height: 50px;

client/views/add/add.html

@@ -1,32 +1,38 @@
 <template name="add">
-	<div id="darker">
-	</div>
+	<div id="darker"></div>
 	<div class="formcontainer modformcontainer">
 		{{> close_button}}
+
 		<h1 class="formtitle">Add Moderators</h1>
 		<div class="modaltopmessage">
 			Press the red "x" to remove moderators. Type in new emails and press "+" for more. Hit "done" once finished.
 		</div>
 		<div class="inputcontainer" style="text-align: center;">
 			{{#each mods}}
-				<div class="modline">
-                    <input class="modbox" disabled="disabled" style="float:left" type="text" maxlength="45" value="{{this}}"/>
-					<div class="removebutton" data-email="{{this}}">
+
+			<div class="modline">
+				<input class="modbox" disabled="disabled" style="float:left" type="text" maxlength="45" value="{{this}}"/>
+				<div class="removebutton" data-email="{{this}}">
 						x
-					</div>
 				</div>
+			</div>
 			{{/each}}
 			{{#each loop newMod}}
+
 			<div class="modline">
-                <input class="modbox newmod" style="float:left" type="text" maxlength="45" />
+				<input class="modbox newmod" style="float:left" type="text" maxlength="45" />
+				<div class="minusbutton" style="display: none;">
+					-
+				</div>
 				<div class="plusbutton">
 					+
 				</div>
 			</div>
 			{{/each}}
+
 			<div id="modsdonebutton">
 				Done
 			</div>
 		</div>
 	</div>
-</template>
+</template>

client/views/add/add.js

@@ -56,11 +56,16 @@ Template.add.events({
       return false;
     }
     const buttons = row.getElementsByClassName('plusbutton');
+    const minusButton = row.getElementsByClassName('minusbutton');
     for (let i = 0; i < buttons.length; i++) {
       buttons[i].style.display = 'none';
+      minusButton[i].style.display = 'inline-block';
     }
     template.numberOfNewMods.set(template.numberOfNewMods.get() + 1);
   },
+  'click .minusbutton': function(event, template) {
+    event.currentTarget.parentElement.remove();
+  },
   'click .removebutton': function (event, template) {
     const mod = $(event.currentTarget).data('email');
     Meteor.call('removeMods', mod, template.data._id);