Delete the last item element JQuery

Question

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>

Answer 1

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

Answer 2

Use .remove() with the :last selector

$('#deleteParams').click(function(){
    $('[id^=ParamName]:last,[id^=ParamValue]:last').remove();
});

Updated Fiddle

Answer 3

You can do it something like :

$("#deleteParams").on('click', function(){
    $("#paramArea").find(':text:last').remove();
});

Demo

Answer 4

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> 

Answer 5

Try this one

$("#deleteParams" ).click(function() {
         $("#paramArea").find(".form-control").filter( ":last" ).remove();
});