0
0
Fork 0

Add delete button to choices.

This commit is contained in:
Tyler-A 2019-09-10 20:49:07 -06:00
parent 3297c70db4
commit e461a0a677
3 changed files with 18 additions and 7 deletions

View file

@ -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>

3
js/delete_choice.js Normal file
View file

@ -0,0 +1,3 @@
const delete_choice = (node) => {
node.parentElement.parentElement.removeChild(node.parentElement)
};

View file

@ -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%; }
/*input[type="text"].left { margin-right: 10%; }
input[type="text"].right { margin-left: 10%; }*/