I'm not familiar with Jquery in the slightest admittedly although it is in the task of things I need to learn. I currently have a project I am working on which requires an add / remove function similar to what is on an invoice.
I would like to be able to add a "Remove" function to the last item appended incase mistakes get made etc
$(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>
If anyone can show and / or explain to me how this is done it would be greatly appreciated. Regards
I rapped the content of your form and the content you add with a <div>
.
Then you can do $('#data > div').last().remove();
#data
is the id of your form.
#data > div
will select all the <div>
that is a first child of your form
.
.last()
selects the last element.
Note if your would like to keep atleast 1 element in your form you can do this:
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>
use some over all div like <div class="items">yourcode</div>
.Then apply with $('.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>
It would be better to wrap the added items in a div, say something like:
<div class="added-item"></div>
then when you click the remove button you will have to find all these added items
var added_items = $('.added-item');
and then remove the last element
added_items.last().remove();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.