我对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>
如果有人能够向我展示和/或向我解释如何做到这一点,我们将不胜感激。 此致
答案 0 :(得分:4)
我用<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>
答案 1 :(得分:1)
使用<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()
});
&#13;
<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>
&#13;
答案 2 :(得分:0)
最好将添加的项目包装在div中,例如:
<div class="added-item"></div>
然后当您单击删除按钮时,您将不得不找到所有这些添加的项目
var added_items = $('.added-item');
然后删除最后一个元素
added_items.last().remove();