[英]Delete the last item element JQuery
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. 我正在做一些事情,基本上我有这个Add Parameter按钮,它添加了2个新文本字段,即参数名称和参数值。 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/ 这是我的代码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
. 您应该将这两个输入包装在div中,并将其附加到
#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()
然后单击删除按钮,您可以获取
.rowelement
并使用:last
和.remove()
删除last元素
$("#deleteParams").click(function(){
$(".rowelement:last").remove();
});
Use .remove()
with the :last
selector 将
.remove()
与:last
选择器一起使用
$('#deleteParams').click(function(){
$('[id^=ParamName]:last,[id^=ParamValue]:last').remove();
});
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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.