remove mod option added in advance options

Author: AvinashAgarwal14

client/styles/global.scss

@@ -473,13 +473,30 @@ a {
 	font-weight: 600;
 }
 
-.plusbuttoncontainer {
+.instancemodsminus {
+	cursor: pointer;
+	background-color: red;
+	color: white;
+	text-align: center;
+	font-weight: 600;
+	width: 31px;
+	float: left;
+	height: 30px;
+	margin: 10px;
+	border-radius: 5px;
+	font-size: 23px;
+}
+
+.buttoncontainer {
 	width: 51px;
 	height: 50px;
+	display: inline;
 }
 
 #recent {
 	padding-bottom: 45px;
 }
 
-
+.modinputfield {
+	padding-bottom: 2em;
+}

client/views/create/create.html

@@ -7,9 +7,9 @@
 				<input id="instancedescriptioninput" type="text" placeholder="Description...">
 			</div>
 			<div id="instancebottominputcontainer">
-				<input class="instancemodsinput firstmodinput" type="email" placeholder="Moderator email...">
-				<div class="emptyinputspacer lastinputspacer">
-					<div class="plusbuttoncontainer firstmodinput">
+				<div class="modinputfield">
+					<input class="instancemodsinput firstmodinput" type="email" placeholder="Moderator email...">
+					<div class="buttoncontainer">
 						<div class="instancemodsplus">
 							+
 						</div>

client/views/create/create.js

@@ -48,19 +48,21 @@ Template.create.events({
     }
   },
   'click .instancemodsplus': function (event, template) {
-    const spacers = document.getElementsByClassName('emptyinputspacer');
-    if (spacers.length < 4) {
-      $('.instancemodsinput').removeClass('lastmodinput');
-      $('.plusbuttoncontainer').removeClass('lastmodinput');
+    const modfields = document.getElementsByClassName('modinputfield');
+    if (modfields.length < 4) {
       $('.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();
-      $('.lastinputspacer').first().removeClass('lastinputspacer');
+      $('.buttoncontainer').last().append('<div class="instancemodsminus" >x</div>');
+      $('<div class="modinputfield"><input class="instancemodsinput" type="text" placeholder="Moderator email..."><div class="buttoncontainer"><div class="instancemodsplus">+</div></div></div>').insertAfter($('.modinputfield').last());
       $('#instancebottominputcontainer').height((index, height) => (height + 50));
     } else {
       showCreateError("You've reached the maximum # of moderators (4).");
       return false;
     }
   },
+  'click .instancemodsminus': function (event, template) {
+    event.originalEvent.path[2].remove();
+    $('#instancebottominputcontainer').height((index, height) => (height - 50));
+  },
   'click #buttonarea': function (event, template) {
     if (!Meteor.user()) {
       return false;

client/views/main/main.scss

@@ -53,12 +53,6 @@ $screen-md: 992px;
 	border-bottom: 1px solid #e3e3e3;
 }
 
-.emptyinputspacer {
-	float: right;
-	height: 2em;
-}
-
-
 .instancemodsinput {
 	float: left;
 	width: 70%;