deleting div in javascript with array
I have created a button you push to add an expense to your budget then it totals them all up. I'm having issues creating a function that will delete a specific expense each time it is clicked. I think the issue is I'm not selecting that proper array. Please help! <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <input type="button" value="Add Expense" onclick="add_expense()"><br> <form> <div id="box"> </div> </form> <input type="submit" value="Total Expenses" onclick="calc_expense()"> <br> <input type="text" id="net_exp"/> </body> </html> var x = -1; var all_exp = 0; function add_expense(){ x += 1; $('#box').prepend("<div class='expense'><input type='text' placeholder='Expense Name'/><input type='text' placeholder='Amount' class='e' required='required'/><input type='button' class='remover' value='Remove' onclick='remove_expense()'/><br><br><br></div>"); } function calc_expense(){ all_exp=0; $('.e').each(function(){ all_exp += parseInt($(this).val()); }); $('#net_exp').val(all_exp); } //delete expense function function remove_expense(){ $('.expense')[this].remove(); }
Often have questions like this?
Learn more efficiently, for free:
