Jquery - 删除最后一个附加项目答案

【问题标题】：Jquery - Remove last append itemJquery - 删除最后一个附加项目
【发布时间】：2017-02-14 19:49:40
【问题描述】：

诚然，我对 Jquery 一点也不熟悉，尽管它是我需要学习的任务。我目前正在处理一个项目，该项目需要类似于发票上的添加/删除功能。

我希望能够在最后附加的项目中添加“删除”功能，以防出错等

$(document).ready(function() {
  var currentItem = 1;
  $('#addnew').click(function(){
   currentItem++;
   $('#items').val(currentItem);
var strToAdd = '<br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select>    Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select>    Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br>';
   $('#data').append(strToAdd);

  });

 });
$('#delete').on('click', function() {
$('#items').parents("br").remove();

});

//]]>
</script><div class="form2">
 <form method="POST" action="invoicereg.php" id="data" name="sub">
    Product:
    <select class="form" name="product1" id="product1">
         <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
         <option value="Aramax Energy Drink">Aramax Energy Drink</option>
     </select>
    Nicotine:
    <select class="form" name="nicotine1" id="nicotine1">
      <option value="N/A">n/a</option>
      <option value="3mg">3mg</option>
      <option value="6mg">6mg</option>
      <option value="12mg">12mg</option>
    </select>
      Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>

    </form>
   <br>
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" form="data" id="items" name="items" value="1" />
     <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
    <input class="button" type="submit" form="data" value="SUBMIT">
    </div>
</div>
</body>
</html>

如果有人可以向我展示和/或解释这是如何完成的，将不胜感激。问候

【问题讨论】：

是否可以为添加的每个新行添加一个删除选项，或者您只希望最后一个具有删除选项...？

标签： javascript jquery

【解决方案1】：

我用<div> 敲击了您的表单内容和您添加的内容。

那你就可以$('#data > div').last().remove();

#data 是表单的 ID。

#data > div 将选择您的form 的第一个子<div>。

.last() 选择最后一个元素。

注意如果您想在表单中至少保留 1 个元素，您可以这样做：

if ($('#data > div').length > 1) {
   $('#data > div').last().remove();
}

$(document).ready(function() {
  var currentItem = 1;
  $('#addnew').click(function(){
   currentItem++;
   $('#items').val(currentItem);
var strToAdd = '<div><br>Product: <select class="form" name="Product'+currentItem+'" id="product'+currentItem+'" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select>    Nicotine: <select class="form" name="nicotine'+currentItem+'" id="nicotine'+currentItem+'"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select>    Quantity:<input class="form3" name="qty'+currentItem+'" id="qty'+currentItem+'" type="number" /><br></div>';
   $('#data').append(strToAdd);

  });

 });
$('#delete').on('click', function() {
  if ($('#data > div').length > 1) {
    $('#data > div').last().remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</script><div class="form2">
 <form method="POST" action="invoicereg.php" id="data" name="sub">
   <div> 
   Product:
    <select class="form" name="product1" id="product1">
         <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
         <option value="Aramax Energy Drink">Aramax Energy Drink</option>
     </select>
    Nicotine:
    <select class="form" name="nicotine1" id="nicotine1">
      <option value="N/A">n/a</option>
      <option value="3mg">3mg</option>
      <option value="6mg">6mg</option>
      <option value="12mg">12mg</option>
    </select>
      Quantity:<input class="form3" type="number" id="qty1" name="qty1"></input><br>
</div>
    </form>
   <br>
    <input class="button" type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" form="data" id="items" name="items" value="1" />
     <input class="button" type="button" id="delete" name="delete" value="Remove" /> 
    <input class="button" type="submit" form="data" value="SUBMIT">
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

使用一些像<div class="items">yourcode</div>这样的整体div。然后使用$('.items').last().remove()申请

$(document).ready(function() {
  var currentItem = 1;
  $('#addnew').click(function() {
    currentItem++;
    $('#items').val(currentItem);
    var strToAdd = '<br><div class="items">Product: <select class="form" name="Product' + currentItem + '" id="product' + currentItem + '" ><option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option><option value="Aramax Energy Drink">Aramax Energy Drink</option></select>    Nicotine: <select class="form" name="nicotine' + currentItem + '" id="nicotine' + currentItem + '"> <option value="N/A">n/a</option><option value="3mg">3mg</option><option value="6mg">6mg</option><option value="12mg">12mg</option></select>    Quantity:<input class="form3" name="qty' + currentItem + '" id="qty' + currentItem + '" type="number" /><br></div>';
    $('#data').append(strToAdd);

  });

});
$('#delete').on('click', function() {
  $('.items').last().remove()

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form2">
  <form method="POST" action="invoicereg.php" id="data" name="sub">
    <div class="items">
    Product:
    <select class="form" name="product1" id="product1">
      <option value="Aramax Classic Tobacco">Aramax Classic Tobacco</option>
      <option value="Aramax Energy Drink">Aramax Energy Drink</option>
    </select>
    Nicotine:
    <select class="form" name="nicotine1" id="nicotine1">
      <option value="N/A">n/a</option>
      <option value="3mg">3mg</option>
      <option value="6mg">6mg</option>
      <option value="12mg">12mg</option>
    </select>
    Quantity:
    <input class="form3" type="number" id="qty1" name="qty1"></input>
    <br>
</div>
  </form>
  <br>
  <input class="button" type="button" id="addnew" name="addnew" value="Add new item" />
  <input type="hidden" form="data" id="items" name="items" value="1" />
  <input class="button" type="button" id="delete" name="delete" value="Remove" />
  <input class="button" type="submit" form="data" value="SUBMIT">
</div>
</div>

【讨论】：

【解决方案3】：

最好将添加的项目包装在一个 div 中，例如：
<div class="added-item"></div>
然后当您单击删除按钮时，您将必须找到所有这些添加的项目
var added_items = $('.added-item');
然后删除最后一个元素
added_items.last().remove();

【讨论】：