Removing content created by jquery

Question

(according webshop)

I want to add an function remove, where I remove the whole entry inserted using ajax & jquery, but it is not working as I want to.

Using the following code:

        $('#div').on('click', '.orderd', function() {
            $(this).remove();
        });

function UpdateTotal() {
            ToAddHTML = '<h1>Shopping cart</h1>';
            Totalprice = 0;
            for (var i = 0; i < orders.length ; i++) {
                var zoekresultaat = SubMenuItems.filter(function(v) {
                    return v.submenu_id === orders[i];
                })[0];
                Totalprice += parseFloat(searched.price);
                ToAddHTML += '';
            }
            ToAddHTML += ''
            $("#totalen").html(ToAddHTML);
        }

This works, but when I console.log the array "orderd items", it still repeats the orderd items. So when I click on a different item, the "just-deleted" order is popping up again.

It's kind of hard to explain my current problem, but I hope i've informed enough! For any questions, please ask! ill update my question!

Answer 1

You should remove the ordered id from your array, and recalculate your "basket" when an item is removed.

// =======================================================================
// ! Functie maken die de totalen-lijst bijwerkt
// =======================================================================
function WerkTotalenBij() {
    ToeTeVoegenHTML = '<h1>Winkelmandje</h1>';
    Totaalprijs = 0;
    for (var i = 0; i < Bestellingen.length ; i++) {
        var zoekresultaat = SubMenuItems.filter(function(v) {
            return v.submenu_id === Bestellingen[i];
        })[0];
        Totaalprijs += parseFloat(zoekresultaat.price);
        // here I put a "data-itemid" attribute to keep a raw reference to the item id
        // this ID can be retrieved in the remove handler
        ToeTeVoegenHTML += '<div class=besteld id=nummer'+Bestellingen[i]+' data-itemid="'+Bestellingen[i]+'">'+'&euro;'+zoekresultaat.price+' '+zoekresultaat.title+'</br>(verwijder)</div><hr>';
    }
    ToeTeVoegenHTML += '<br/>Totale prijs per persoon :<br/> &euro; '+Totaalprijs+'<br/>Minimaal 10 personen<br/> Aantal personen:<input type=text width="10px" /><input type="button" value="Ik ben klaar!">';
    $("#totalen").html(ToeTeVoegenHTML);
}

$('#totalen').on('click', '.besteld', function() {
    var itemID = $(this).data("itemid");
    // remove the item ID from the array
    var index = Bestellingen.indexOf(itemID);
    if (index > -1) {
        Bestellingen.splice(index, 1);
    }        
    $(this).remove();
    // recalculate orders
    WerkTotalenBij();
}); 

But anyway, this is the typical work where you should rather use for example knockout.js libaray, where you can bind your DOM elements directly to your data, and it's enought to manipulate with your data, the GUI will automatically reflect to the changes. Believe me, it's worth to learn it, you won't regret.