<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();
}

We see you’re using an ad blocker.

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.