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> 

如果任何人都可以顯示和/或向我解釋如何做到這一點，將不勝感激。 Regards

Answer 1

我把你的表單的內容和你添加的內容用<div>打了一遍。

然後，你可以做$('#data > div').last().remove();

#data是表單的ID。

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

.last()選擇最後一個元素。

注意如果想保持ATLEAST 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();