I'm trying to add some string from button that has a value into an input field but doesn't work ..
here's jquery code, can anyone please fix it ?
<script type="text/javascript">
$(function () {
$('#button1').on('click', function () {
var text = $('#kategori');
text.val(text.val() + $('#button1')(text.val());
});
});
</script>
and here html + php code
<div class="form-group">
<label for="kategori">
Kategori:
</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
</div>
<?php $query = $this->db->query("SELECT * from kategori_elibrary");
$hasil = $query->result();
?>
<div class="btn-group">
<?php
foreach($hasil as $row){
echo '<button type="button" class="btn btn-primary" id="button1" value="'.$row->kategori.'">'.$row->kategori.'</button>';
} ?>
</div>
$('#button1').on('click', function () {
$('#kategori').val($('#kategori').val() + $('#button1').attr('value'));
});
Are you need like this: button text added into textbox at the time of click.apply $(this).html() button value add to texbox
$('#button1').on('click', function () {
$('#kategori').val($('#kategori').val()+$(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="kategori">
Kategori:
</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
<button id="button1">before</button>
</div>
<div class="btn-group">
</div>
Alternate
if you create the button like
`<input type="button" id="button1" value="before">
in jquery use with. $(this).val()
with the help of data-attributes which makes the button markup look like this:
<button type="button" class="btn btn-primary" id="button1" data-value="Food">
Food
</button>
Then you can use this script: UPDATED
// NOTE: This will get all button elements of type button
// if you have other elements of this markup change the selector to:
// $('button[id^="button"]')
$('button:button').on('click', function() {
var $target = $('#kategori'),
text = $('#kategori').val(),
buttonVal = $(this).data('value');
$target.val(`${text}${buttonVal}`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="kategori">
Kategori:
</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
</div>
<button type="button" class="btn btn-primary" id="button1" data-value="Food">Food</button>
<button type="button" class="btn btn-primary" id="button2" data-value="Tools">Tools</button>
<button type="button" class="btn btn-primary" id="button2" data-value="Anything">Anything</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="kategori">
Kategori:
</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="button1" value="1">1</button>
<script type="text/javascript">
$(function () {
$('#button1').on('click', function () {
var text = $('#kategori');
text.val(text.val() + $('#button1').val());
});
});
</script>
<button type="button" class="btn btn-primary" id="button2" value="2">2</button>
<script type="text/javascript">
$(function () {
$('#button2').on('click', function () {
var text = $('#kategori');
text.val(text.val() + $('#button2').val());
});
});
</script>
</div>
$( '.button-input' ).on( 'click', function () {
$( '#kategori' ).val( $(this).val() );
} );
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="form-group">
<label for="kategori">Kategori:</label>
<input type="text" class="form-control" id="kategori" name="kategori" />
</div>
<?php
$query = $this->db->query("SELECT * from kategori_elibrary");
$hasil = $query->result();
?>
<div class="btn-group">
<?php foreach ( $hasil as $row ) { ?>
<input type="button" class="btn btn-primary button-input" id="button<?= $row->id; ?>" value="<?= $row->kategori; ?>" />
<?php } ?>
</div>
Related
How to get input values in php array dynamically field add and remove data, increase and decrease field dynamically. I wan to get subject value in array or json format in php only.
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="field-name">Field Name</label>
<input type="text" class="form-control" name="subject[]" id="subject[]" placeholder="Subject">
</div>
<div class="form-group">
<label class="sr-only" for="field-value">Field Value</label>
<input type="text" class="form-control" name="mark[]" id="mark[]" placeholder="Total Mark">
</div>
<button class="btn btn-link" data-role="remove">
<span class="fa fa-minus text-danger"></span>
</button>
<button class="btn btn-link" data-role="add">
<span class="fa fa-plus"></span>
</button>
</div>
<script>
$(function () {
// Remove button click
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-inline [data-role="remove"]',
function (e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
}
);
// Add button click
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-inline [data-role="add"]',
function (e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function () {
$(this).val('');
});
container.append(new_field_group);
}
);
});
</script>
try this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="body">
<div class="row col-md-12" style="padding-top: 50px;">
<form>
<div class="form-group col-md-12">
<button type="button" class="btn btn-secondary" onClick="AddForm();">Add</button>
<button type="button" class="btn btn-secondary" onClick="DeleteForm();">Delete</button>
</div>
<div id="SectionMultipleForm1" class="col-md-12">
<h5 id="sec_tittle1" style="font-size: 16px; text-decoration: underline;">Form 1</h5>
<div class="form-group">
<label>Field A</label>
<input type="text" id="FieldA1" name="FieldA[]" class="form-control">
</div>
<div class="form-group">
<label>Field B</label>
<input type="text" id="FieldB1" name="FieldB[]" class="form-control">
</div>
</div>
<div class="col-md-12">
<button type="button" class="btn btn-secondary"> Submit</button>
</div>
</form>
<br>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script type="text/javascript">
function AddForm(){
var $div = $('div[id^="SectionMultipleForm"]:last');
var now = parseInt( $div.prop("id").match(/\d+/g), 10 ) ;
var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;
$("#SectionMultipleForm"+now).eq(0).clone().prop('id', 'SectionMultipleForm'+num ).insertAfter('div[id^="SectionMultipleForm"]:last');
//title
$("#SectionMultipleForm"+num).find("#sec_tittle"+now).attr("id", "sec_tittle"+num);
$("#SectionMultipleForm"+num).find("#sec_tittle"+num).text("Form "+num);
//FieldA1
$("#SectionMultipleForm"+num).find("#FieldA"+now).attr("id", "FieldA"+num);
document.getElementById("FieldA"+num).setAttribute('value','');
//FieldB1
$("#SectionMultipleForm"+num).find("#FieldB"+now).attr("id", "FieldB"+num);
document.getElementById("FieldB"+num).setAttribute('value','');
}
function DeleteForm(){
var num = $('div[id^=SectionMultipleForm]').length;
if(num!=1){
$('#SectionMultipleForm'+num).remove();
}
}
</script>
</body>
</html>
first at function AddForm() find the last div with id SectionMultipleForm and get the number
this section at <script> is to clone inside id SectionMultipleForm and put it after the last SectionMultipleForm
$("#SectionMultipleForm"+now).eq(0).clone().prop('id', 'SectionMultipleForm'+num ).insertAfter('div[id^="SectionMultipleForm"]:last');
and this section change id FieldA,FieldB, and title at the last clone div with id SectionMultipleForm
//title
$("#SectionMultipleForm"+num).find("#sec_tittle"+now).attr("id", "sec_tittle"+num);
$("#SectionMultipleForm"+num).find("#sec_tittle"+num).text("Form "+num);
//FieldA
$("#SectionMultipleForm"+num).find("#FieldA"+now).attr("id", "FieldA"+num);
document.getElementById("FieldA"+num).setAttribute('value','');
//FieldB
$("#SectionMultipleForm"+num).find("#FieldB"+now).attr("id", "FieldB"+num);
document.getElementById("FieldB"+num).setAttribute('value','');
and at the fuction DeleteForm() first count how many div have id SectionMultipleForm and delete the last div with that id
var num = $('div[id^=SectionMultipleForm]').length;
if(num!=1){
$('#SectionMultipleForm'+num).remove();
}
I'm using a form code copied from here that allows the user to add input fields.
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
My problem is that I want to add autocomplete from a fixed set of possibilities. For that I'm using this code:
<script type="text/javascript">
$(document).ready(function(){
var location_input=$('input[id="autocomplete-key"]');
location_input.autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
} );
// keeps same width as box
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
</script>
It works fine for the first input field, but it doesn't work with the added new input fields.
UPDATE: I made a snippet to better exemplify the problem:
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: availableTutorials,
minLength: 2,
});
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
you're using id which is unique , use class and add the autocomplete to all the inputs :
html :
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here" id="autocomplete-key">
js :
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
});
});
Im trying it with laravel. On button click I need to display the same div .
My code:
<h6>Other features </h6>
<div id="add1">
<input type="text" name="selprice" />
<input type="submit" value="+" id="add">
</div>
This is my html code.Here,when I click the button**(ie.,+)** it should show up the same div(ie add1).
Script code:
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("#add1").show();
});
});
</script>
This is what I have tried.
if you are cloning div use class instead of id.
use this context to get the click element
use append to add the cloned div to container
$(document).ready(function() {
$(document).on("click",".add",function() {
$("#container").append($(this).parent(".add1").clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Update
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Here you go with the solution https://jsfiddle.net/nuu4ofwu/2/
var cnt = 1;
$(document).on('click', 'input[type=submit]', function(){
cnt++;
var div = $(this).parent().clone();
$('body').append(div);
$('div:last-child').attr('id', 'add' + cnt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add" />
</div>
You should define another div as a template:
HTML:
<div id="template" style="display:none;">
<div id="add_2">
<h6>Other features</h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add_button_number"></div>
</div>
</div>
Javascript:
<script>
$('#add').click(function(){
var str = $('#add_2').html();
$('#add1').after(str);
})
</script>
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
i want when click on option input add and option value replace with input value but when click on the option more than one it dont replace and i must click on another option then click it can work!
You are setting the value of the newly created input to frm.add_ip.valuŠµ which is the value of the input, not the select.
Since it's in a form you're already using, you can access the select (and it's value) using
form.Ultra.value
which gives you the actual value (0,8,5,4), or you can access it via jquery with
$("#Ultra").val()
which gives you the same thing.
That said, you're generating all the other text-boxes with the same id of ip. Since you already give specific id's to the paragraph tags, you should use the exact approach with the text-boxes as well.
<script>
function run() {
document.getElementById("ip").value= document.getElementById("Ultra").value;
}
</script>
<script>
var rowNum = 0;
function addRow(frm) {
rowNum ++;
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+$("#Ultra").val()+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
remove addRow and run methods and add this event handler. You don't need to handle click on option separately, onchange on select is enough. You are not using the values of options anyways.
$( "#Ultra" ).change( function(){
$( "#ip" ).val( $( this ).val() );
var row = '<p id="rowNum'+rowNum+'"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="'+frm.add_ip.value+'" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow('+rowNum+');" class="remove" style=" width:9%;"></p>';
$( '#itemRows' ).append(row);
} );
function run() {
document.getElementById("ip").value = document.getElementById("Ultra").value;
}
var rowNum = 0;
function addRow(frm) {
rowNum++;
var row = '<p id="rowNum' + rowNum + '"><span class="lb">Ip Address:</span><input id="ip" type="text" name="ip[]" size="4" value="' + frm.add_ip.value + '" required placeholder="192.168.0.1:80" class="form-control wid2" /> <input type="button" value="-" onclick="removeRow(' + rowNum + ');" class="remove" style=" width:9%;"></p>';
jQuery('#itemRows').append(row);
frm.add_ip.value = '';
}
function removeRow(rnum) {
jQuery('#rowNum' + rnum).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="myformp">
<form method="get" class="myformp2" id="ipForm">
<div id="itemRows">
<span class="lb">Ip Address:</span><input class="form-control wid2 " type="text" name="add_ip" size="4" required placeholder="192.168.0.1:80" title="ip address" id="ip"/> <input type="button" value="+" class="add" style=" width:9%;" />
</div>
<button type="submit" class="btn btn-default mybtn2">save</button>
<div class="clear"></div>
<select id="Ultra" onchange="run()"> <!--Call run() function-->
<option onclick="addRow(this.form);"value="0">Select</option>
<option onclick="addRow(this.form);"value="8">text1</option>
<option onclick="addRow(this.form);"value="5">text2</option>
<option onclick="addRow(this.form);"value="4">text3</option>
</select>
</form>
</div>
Some thing wrong !
I'm working on something, basically I have this Add Parameter button which adds 2 new text field namely a parameter name and parameter value. I have a button which is delete parameter. How can I delete the last parameter name and value? The button should delete the last.
Here's my code https://jsfiddle.net/q7fokdbw/
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="paramArea">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" class="form-control" id="paramCount" name="paramCount" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="deleteParams">Detele Parameter</button>
</div>
</div>
<script>
$(function() {
var count = 0;
$( "#addParams" ).click(function() {
$("#paramArea").append('<br /><input type=text class="form-control" name=ParamName'+count+' id=ParamName'+count+' placeholder="Parameter Name" /> ');
$("#paramArea").append('<br /><input type=text class="form-control" name=ParamValue'+count+' id=ParamValue'+count+' placeholder="Parameter Value" />');
count++;
$("#paramCount").val(count);
});
});
</script>
You should rather wrap those two inputs in div and append it to #paramArea. like this:
$("#paramArea").append('
<div class="rowelement"><input type=text class="form-control" name=ParamName'+count+'
id=ParamName'+count+' placeholder="Parameter Name" /><br />
<input type=text class="form-control"
name=ParamValue'+count+' id=ParamValue'+count+'placeholder="Parameter Value" /></div>
');
and on click of delete button, you can get .rowelement and delete last element using :last and .remove()
$("#deleteParams").click(function(){
$(".rowelement:last").remove();
});
Use .remove() with the :last selector
$('#deleteParams').click(function(){
$('[id^=ParamName]:last,[id^=ParamValue]:last').remove();
});
Updated Fiddle
You can do it something like :
$("#deleteParams").on('click', function(){
$("#paramArea").find(':text:last').remove();
});
Demo
Using a container will make this easier.
$(function() {
var count = 0;
$("#addParams").click(function() {
$("#paramArea").append(
'<br /><div class="container"><input type=text class="form-control" name=ParamName' + count + ' id=ParamName' + count + ' placeholder="Parameter Name" /> <br /><input type=text class="form-control" name=ParamValue' + count + ' id=ParamValue' + count + ' placeholder="Parameter Value" /></div>');
count++;
$("#paramCount").val(count);
});
$("#deleteParams").click(function() {
$('.container').last().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="paramArea">
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="hidden" class="form-control" id="paramCount" name="paramCount" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="addParams">Add Parameter</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="deleteParams">Detele Parameter</button>
</div>
</div>
Try this one
$("#deleteParams" ).click(function() {
$("#paramArea").find(".form-control").filter( ":last" ).remove();
});