Question

我正在做一些事情，基本上我有这个Add Parameter按钮，它添加了2个新的文本字段，即参数名称和参数值。我有一个删除参数的按钮。如何删除最后一个参数名称和值？该按钮应删除最后一个。

<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

您应该将这两个输入包装在div中并将其附加到#paramArea。像这样：

$("#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>
');

点击删除按钮，您可以使用.rowelement和:last

获取.remove()并删除最后一个元素

$("#deleteParams").click(function(){
    $(".rowelement:last").remove();
});

Answer 2

将.remove()与:last选择器

一起使用

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

<强> Updated Fiddle

Answer 3

你可以这样做：

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

Demo

Answer 4

使用容器可以使这更容易。

$(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

试试这个

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

删除最后一个项目元素JQuery

5 个答案: