Add & Remove Row

by 14ongm

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container-fluid">
    <div class="container">
        <form>
            <div class="row page-header">
                <div class="col-lg-10">
                    <div class="form-group">
                        <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-7">
                    <div class="form-group">
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn"> 
                                <button type="button" class="btn btn-default button-remove" aria-label="Remove">
                                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-default button-bullet" aria-label="Bullet">
                                    <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span>
                                </button>
                            </div> 
                            <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"> 
                            <div class="input-group-btn">  
                                <button type="button" class="btn btn-default button-add" aria-label="Add">
                                    <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                               ...

CSS

/*import custom font*/
@import 'https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';

.container-fluid{
    background-color: #86E1D8;
}

/*Page*/
.container{
    margin-top: 50px;
    height: 100vh;
    background-color: white;
    font-family: 'Work Sans', sans-serif;
    /*Background shadow*/
    -webkit-box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
    -moz-box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
    box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
}

/*remove header grey line*/
.page-header{
    border-bottom:none;
}
/*Get rid of that blue outline when input text*/
/*.form-control{
    border: none;
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}*/

/*Get rid of blue outline Chrome*/
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

.btn{
  border:0px solid transparent; /* this was 1px earlier */
 }

/*Buttons*/
.button-add, .button-remove{
    display: none;
}

#Done-Button{
    margin-right: 20px;
}

.btn.button-add:hover, #Done-Button:hover{
    background-color: #E5FFFB;
}

.btn.button-remove:hover {
    background-color: #FCC1C5;
}

/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-remove, .btn.button-bullet,.btn.button-bullet:focus{
  background-color: transparent;
}

.glyphicon-minus-sign, .glyphicon-plus-sign{
    font-size: 28px;
}

.glyphicon-minus-sign{
    color: #F53240;
}

.glyphicon-plus-sign, .glyphicon-ok-sign{
    color: #02C8A7;
}
.glyphicon-ok-sign {
    font-size: 70px;
}

/*Circle icon*/
.glyphicon.glyphicon-one-fine-dot {
    margin-top: -1.4em;
    overflow: hidden;
}
.glyphicon.glyphicon-one-fine-dot:before {
    content:"\25cf";
    font-size: 3em;
}

/*Circular buttons*/
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding:  0px;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width:...

JavaScript

$(document).ready(function(){
    $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
        $(".button-add").fadeToggle(300);
    })
    $(".button-bullet").closest('.input-group-btn').hover(function(){
        $('.button-bullet').toggle();
        $(".button-remove").toggle();
    })
    
    $(".button-add").click(function(){
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone();
        $wsProbRow.insertAfter($row);
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        $(this).closest('.row').remove();
        console.log("Remove-Button pressed");
    })
})