jQuery-刪除最后一個附加項

Question

我承認一點都不熟悉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>

如果有人可以向我展示和/或向我解釋如何做到這一點，將不勝感激。 問候

Answer 1

我用<div>敲擊了表單的內容和添加的內容。

然后您可以執行$('#data > div').last().remove();

#data是表單的ID。

#data > div將選擇所有<div> ，它是form的第一個孩子。

.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> 

Answer 2

在所有div上使用一些<div class="items">yourcode</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> 

Answer 3

最好將添加的項目包裝在div中，例如：
<div class="added-item"></div>
然后，當您單擊刪除按鈕時，您將必須找到所有這些添加的項目
var added_items = $('.added-item');
然后刪除最后一個元素
added_items.last().remove();