From e461a0a677e75b69b62a7fd6c140a0e55cb71443 Mon Sep 17 00:00:00 2001
From: Tyler-A <Tyler.akins1999@gmail.com>
Date: Tue, 10 Sep 2019 20:49:07 -0600
Subject: [PATCH] Add delete button to choices.

---
 index.html          |  3 +++
 js/delete_choice.js |  3 +++
 style.css           | 19 ++++++++++++-------
 3 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 js/delete_choice.js

diff --git a/index.html b/index.html
index 7f2e9df..6f3b68b 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
         <link rel="stylesheet" href="style.css">
 
         <!-- JAVASCRIPT -->
+        <script src="./js/delete_choice.js"></script>
         <script src="./js/add_choice.js"></script>
         <script src="./js/choosing.js"></script>
     </head>
@@ -19,6 +20,7 @@
             <div class="choice">
                 <input type="text" class="left" placeholder="Choice Name">
                 <input class="right" type="text" placeholder="Choice Weighting">
+                <button class="delete" onclick="delete_choice(this)">X</button>
                 <div class="line"></div>
             </div>
         </template>
@@ -32,6 +34,7 @@
                 <div class="choice">
                     <input class="left" type="text" id="text-in-0" placeholder="Choice Name">
                     <input class="right" type="text" id="weight-in-0" placeholder="Choice Weighting">
+                    <button class="delete" onclick="delete_choice(this)">X</button>
                     <div class="line"></div>
                 </div>
             </div>
diff --git a/js/delete_choice.js b/js/delete_choice.js
new file mode 100644
index 0000000..363a8a3
--- /dev/null
+++ b/js/delete_choice.js
@@ -0,0 +1,3 @@
+const delete_choice = (node) => {
+    node.parentElement.parentElement.removeChild(node.parentElement)
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index 2cbba1d..f1c98a7 100644
--- a/style.css
+++ b/style.css
@@ -10,25 +10,30 @@ div.container {
 }
 
 
+button.delete {
+    width: 10%;
+    margin: 0 auto;
+}
+
 
 div.line {
-    --margin-height: 15px;
-    height: 2px;
     background-color: #7289da;
-    margin-top: var(--margin-height);
-    margin-bottom: var(--margin-height);
+    margin-bottom: 15px;
+    margin-top: 15px;
+    height: 2px;
 }
 
 
 
 input[type="text"] {
     display: inline-block !important;
+    margin-bottom: 0px;
     margin-right: 0px;
     margin-left: 0px;
     margin-top: 0px;
-    margin-bottom: 0px;
+    width: 40%;
 }
 
 /* Move boxes further apart */
-input[type="text"].left { margin-right: 10%; }
-input[type="text"].right { margin-left: 10%; }
\ No newline at end of file
+/*input[type="text"].left { margin-right: 10%; }
+input[type="text"].right { margin-left: 10%; }*/
\ No newline at end of file