//Al cargar el documento, ejecutaremos lo siguiente

document.addEventListener("DOMContentLoaded", function(){

    var tbody = document.querySelector("#productos tbody"), //El cuerpo de la tabla

        total = tbody.querySelector("#total"), //La celda del total

        fila, //Variable a utilizar para almacenar una fila

        valor, //El valor de la celda del costo de la fila a eliminar

        suma = 0; //La variable acumuladora

    //Recorremos al conjunto de celdas con la clase "costo"

    [].forEach.call(tbody.querySelectorAll(".costo"), function(costo){

        //Y acumulamos sus valores

        suma += parseFloat(costo.innerHTML);

    });

    //Fijamos el valor del acumulado a dos decimales

    suma = suma.toFixed(2);

    //Mostramos el acumulado en la celda del total

    total.innerHTML = "Total: " + suma;

    //Recorremos al conjunto de opciones "Eliminar"

    [].forEach.call(tbody.querySelectorAll("label"), function(opcion){

        //Cuando se dé un clic en alguna de ellas, ejecutaremos una función

        opcion.addEventListener("click", function(){

            //Tomamos a la fila que contiene al botón pulsado

            fila = this.parentNode.parentNode;

            //Tomamos al valor de la celda del costo de esta fila

            valor = fila.querySelector(".costo").innerHTML;

            //Actualizamos el valor de la variable acumuladora

            suma -= parseFloat(valor);

            //Fijamos el valor del acumulado a dos decimales

            suma = suma.toFixed(2);

            //Actualizamos el valor de la celda del total

            total.innerHTML = "Total: " + suma;

            //Eliminamos la fila de la tabla

            tbody.removeChild(fila);

        }, false);

    });

}, false);