<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 col-lg-offset-2 col-md-offset-2">
<div class="main_border">
<div class="main_header_bg">jQuery Add and Remove (Top to Remove)</div>
<div class="panel-body">
<div id="my_fields">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 nopadding">
<div class="form-group">
<input type="text" name="f_name" placeholder="First Name" class="form-control my_form">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" name="l_name" placeholder="Last Name" class="form-control my_form">
<div class="input-group-btn">
<button class="btn btn-success add_btn" type="button" onclick="my_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
.main_header_bg{
background-color:#F90;
padding:10px 15px;
font-size:14px;
color:#FFF;
border:1px solid #F90;
font-weight:bold;
margin:0px;
border-radius:3px;
}
.main_border{
border:1px solid #F90;
border-radius:3px;
margin-top:50px;
}
.border_fff{
border-bottom:2px solid #FFF;
}
label{
font-weight:600;
margin:20px auto -5px;
font-size:13px;
}
.cus_label{
font-weight:600;
margin-top:10px;
}
.my_form{
border-radius:0px !important;
padding:1px 15px !important;
margin:10px auto;
}
.add_btn{
font-weight:bold;
font-size:20px;
padding:7px 12px;
border:none;
margin:10px 5px 0px;
}
.remove_btn{
font-weight:bold;
font-size:20px;
padding:6px 12px;
margin:10px 5px 0px;
}
.panel-body {
padding:50px 15px;
}
var room = 1;
function my_fields() {
room++;
var objTo = document.getElementById('my_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-md-6 col-sm-6 col-xs-12 nopadding"><div class="form-group"><input type="text" name="f_name" placeholder="First Name" class="form-control my_form"></div></div><div class="col-md-6 col-sm-6 col-xs-12 nopadding"><div class="form-group"><div class="input-group"><input type="text" name="l_name" placeholder="Last Name" class="form-control my_form"><div class="input-group-btn"> <button class="btn btn-danger remove_btn" type="button" onclick="remove_my_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_my_fields(rid) {
$('.removeclass'+rid).remove();
}
Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.