javascript shopping basket delete content

i have a shopping basket, and some javascript methods for real time updating number of contents and sum. The javascript updating quantity and the total sum are perfectly synchronised using the methods:

            $('#add-to-basket select').selectbox();
    $('#contents select').selectbox().change(function (e) {
        var product = $(this).parents('.product');
        var ppu     = product.find('.ppu').val();
        product.find('.price .wrapper .value').text($(this).val() * ppu);

        var total   = 0;

        $('.product .price .value').each(function (index, value) {
            total += +$(value).text();
        });

        var form = $(this).parents('form');
        form.ajaxSubmit(function () {
        });

        $('#total .value').text(total);
    });

but the 'drop object from basket' method is not updating the total sum...the code i have managed to write:

$('.drop-item').click(function(e) {
        e.preventDefault();
        var form = $(this).parents(form);
        var item = $(this).parents('li');

        var total   = 0;

how开发者_如何学Go can o modify it so that when someone deletes something from the basket, the sum to be updated automatically (not by onclick refreshing the page, it injects me some anomalies)? I would like to be updated automatically just like it does on the above update basket method.

Thank you!

edit: the entire code:

    $('#add-to-basket select').selectbox();
    $('#contents select').selectbox().change(function (e) {
        var product = $(this).parents('.product');
        var ppu     = product.find('.ppu').val();
        product.find('.price .wrapper .value').text($(this).val() * ppu);

        var total   = 0;

        $('.product .price .value').each(function (index, value) {
            total += +$(value).text();
        });

        var form = $(this).parents('form');
        form.ajaxSubmit(function () {
        });

        $('#total .value').text(total);
    });

    $('#delivery #address a').qtip({
        content: 'Vei putea reveni la coș dând click pe <span>Coșul Meu</span> în meniu.'
    });

    $('.drop-item').click(function(e) {
        e.preventDefault();
        var form = $(this).parents(form);
        var item = $(this).parents('li');
        var total   = 0;



        $('.product .price .value').each(function (index, value) {
            total +=  +$(value).text();
        });

        $('#total .value').text(total);

        item.remove();
        form.ajaxSubmit(function() {});

        if ($('#contents li').length < 1)
        {
            $('#basket').remove();
            $('#basket-breadcrumbs').remove();

            $('#main').append('<p class="message">Coșul tău este gol.</p>');
        }
    });

If you mean the "total" variable isn't changing, it's because of variable scoping. When inside a function you declare a variable, it's local to the function: only the function can access it and manipulate it.

So, if you want to make the total variable global (or of higher scoping, meaning that more things can access it):

$(function() {
    var total = 0;
    //code code code
});

Now, make sure that you won't prefix total later on with the var statement; as said, this creates a local variable and overrides the global one.

((Edit: This was a rather half-assed explanation of what variable scoping is. I suggest you Google or search Stackoverflow to find more information about it; it's a very important thing in JavaScript))

If you mean removing an element from somewhere, use jQuery's remove function.