Al ejecutar RemoveChild restar valor al total

[pandora09]

Buenas noches,

Tengo un sistema de facturación en donde esta una función de removechild para eliminar algún articulo no deseado esta se ejecuta correctamente es decir elimina la fila pero yo necesito que al eliminar dicha fila en cuestión se reste el valor (el costo del producto) del campo total a pagar y no he conseguido como hacerlo.

Seria de gran ayuda que alguno de ustedes me pudiese orientar y muchas gracias de antemano por la colaboración que me puedan prestar.

Este es el codigo con el cual elimino la fila

Código Javascript:

var campo5 = document.createElement("input");
        campo5.type = "image";
        campo5.src = '14.png';
        campo5.style.background = "#143D55";
        campo5.style.border = "1px solid #320C83";
        campo5.style.borderRadius = "100px";
        campo5.style.marginLeft = "60px";
        campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            
            tbody.removeChild(fila);
 
            }
 

Y con este voy sumando los subtotales a medida que se vayan agregando

Código Javascript:

var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = (Number(total.innerHTML)+Number(totalitem)).toFixed(2);
}
 

[Alexis88]

Si conoces el número de celda que ocupa cada cifra en cada fila, digamos, la tercera de cada fila, podrías recorrer a las filas de la tabla y sumar los valores de cada tercera celda, o, mejor aún, desde un inicio puedes añadir una clase a dichas celdas para que las tomes directamente por la clase en cuestión y solo tendrías que recorrer al conjunto resultante e ir sumando los valores encontrados.

Saludos

[Tipdar]

Utiliza una variable global que contenga el número de filas y cuando invoques la función removeChild la decrementas.

[pandora09]

Buenos días,

He intentado de dar con la solución pero aun nada que lo consigo, hasta ahora llevo esto la verdad no se que mas hacer. Por favor, si me pueden ayudar.

Esto es lo que he podido hacer con ayuda de este foro y no me funciona no se que estoy haciendo mal.

Código Javascript:

campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            var subtotal=document.getElementById("totalitem");
            var total=parseInt(p.value);
            total  = dinero - parseInt(campo4.parentNode.parentNode.getElementsByTagName('tbody')[0].value, 10);
 
            tbody.removeChild(fila);
 

En una oportunidad utilice este codigo para realizar una sumatoria de campos pero ahora no me funciona y no se porque (coloco este codigo porque me podria servir mas no forma parte del codigo de facturacion)

Código Javascript:

function calculartci(totalitem[],total){
        var tci=document.getElementById.('totalitem[]').value;
        var total=0;
            for(var i = 0; i < tci.length; i++) {
        total += parseFloat(tci[i].value);
            }
            if(isNaN(totalitem[]) == false) {
            total += parseFloat(tci[i].value);
            }
        document.getElementById(total).value=(+ total);
        }
 

[Alexis88]

Hay un error claro:

Código Javascript:

document.getElementById.('totalitem[]').value
 

Ese punto antes del paréntesis de apertura no debe de estar.

Hay varias formas de hacer esto. Podrías asignar una clase a cada celda que contenga el número a sumar, luego, recorres dicho conjunto de celdas, tomas sus valores, los parseas a entero o punto flotante (según lo que necesites) y los vas acumulando en una variable.

Por ejemplo:

Código HTML:

<table>
    <tr>
        <td>Juan</td>
        <td>Pérez</td>
        <td class = "monto">1890.34</td>
    </tr>
    <tr>
        <td>Estela</td>
        <td>García</td>
        <td class = "monto">1264.25</td>
    </tr>
    <tr>
        <td>María</td>
        <td>Solís</td>
        <td class = "monto">2947.43</td>
    </tr>
</table>
 

Código Javascript:

var total = 0;
[].forEach.call(document.querySelectorAll(".monto"), function(td){
    total += parseFloat(td.innerHTML);
});
 
console.log(total.toFixed(2)); //6102.02
 

Saludos

[pandora09]

Hola Alexis88,

Gracias por responder, he implementado tu codigo pero no me funciona debe haber algo que estoy haciendo mal. Mi intencion es restar el valor del campo eliminado al campo total cabe mencionar que mis filas se generan dinamicamente con js. He intentado hacerlo con la misma funcion con la cual sumo pero cambiando el signo de + por el de - para que me reste el valor peero me devuelve NaN en el campo total.

Voy asi:

Código Javascript:

campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
 
            var total = document.getElementById("total");
 
            total.innerHTML -= Number(totalitem).toFixed(2);
 
 
            tbody.removeChild(fila);
 
            }
 

[Alexis88]

Si te fijas bien en lo que estás haciendo, la variable totalitem no posee valor alguno ya que no se lo asignas (a menos de que lo hayas hecho en otra parte del código que no estás mostrando), además, para que restes el valor de dicha celda al de la que contiene el total, tienes que parsear el valor de esta última celda para que puedas operar con ella ya que, si lo haces directamente, actuará como una cadena.

Si pudieras mostrar lo que hiciste con el ejemplo que te dí, podría ayudarte.

Saludos

[pandora09]

Alexis88,

Emplee tu código pero no me hace nada estoy segura de que el problema esta en que no lo entiendo y por ende no lo puedo aplicar correctamente ya que mi nivel de js como puedes ver es algo bajo.

Por otro lado, he estado tratando y tratando y ya consigo que me reste pero solo resta de manera efectiva cuando tengo un solo producto agregado devolviendome como resultado "0,00" en cambio cuando tengo dos o mas me devuelve el valor NaN en el campo total. Si me pueden ayudar por favor a ver en donde me estoy equivocando se los agradecería muchísimo.

Hasta ahora llevo esto para restar al eliminar dicha fila

Código Javascript:

campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            var total = document.getElementById("total");
            if (total.innerHTML == 'NaN') {
            total.innerHTML = 0;
            }
            total.innerHTML = (Number(total.innerHTML)-Number(totalitem.value)).toFixed(2);
 
 
            tbody.removeChild(fila);
 
            }
 

Y como comentabas efectivamente el valor del campo totalitem lo traigo desde acá cuando calculo el subtotal (cantidad*precio):

Código Javascript:

function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'preciounit[]') {
preciounit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat(preciounit*cantidad).toFixed(2);
nodes[x].firstChild.value = totalitem;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = (Number(total.innerHTML)+Number(totalitem)).toFixed(2);
}
 

[Alexis88]

Tienes que volver a tomar el valor de la celda de la fila a eliminar pues lo que hiciste en la función "Calcular" fue tomar el valor de cada celda e ir reemplazándolo en cada vuelta.

En realidad, lo que buscas hacer, no es difícil.

Código HTML:

<table id = "productos">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Costo</th>
            <th>Opción</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manzana</td>
            <td class = "costo">12.57</td>
            <td>
                <label>Eliminar</label>
            </td>
        </tr>
        <tr>
            <td>Sandía</td>
            <td class = "costo">35.41</td>
            <td>
                <label>Eliminar</label>
            </td>
        </tr>
        <tr>
            <td>Melón</td>
            <td class = "costo">18.35</td>
            <td>
                <label>Eliminar</label>
            </td>
        </tr>
        <tr>
            <td id = "total" colspan = "3"></td>
        </tr>
    </tbody>
</table>
 

Código Javascript:

//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);
 

DEMO

La explicación está en los comentarios. Disculpa la extensión del ejemplo pero lo hice de esa manera para que veas el paso a paso al detalle. Si tienes alguna duda, pregúntame.

Saludos

[pandora09]

Que pena Alexis88 pero aun no doy con la solucion, he llegado hasta aqui a pesar de tu detallada explicacion, ahora no me resta nada sino que se la sale de la pag y queda en blanco como en un bucle infinito.

Código Javascript:

var campo4 = document.createElement("input");
        campo4.type = "text";
        campo4.name = "totalitem[]";
        campo4.id = "totalitem";
        campo4.class = "costo";
        campo4.placeholder = "0,00";
        campo4.readOnly = "true";
        campo4.style.textAlign = "right";
    
    var campo5 = document.createElement("input");
        campo5.type = "image";
        campo5.src = '14.png';
        campo5.style.background = "#143D55";
        campo5.style.border = "1px solid #320C83";
        campo5.style.borderRadius = "100px";
        campo5.style.marginLeft = "60px";
        campo5.onclick = function() {
        
            suma = 0;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            var fila = this.parentNode.parentNode;
            var valor = fila.querySelector(".costo").innerHTML;
 
            suma -= parseFloat(valor);
            suma = suma.toFixed(2);
            total.innerHTML = + suma;
      
            tbody.removeChild(fila);
 
            }
 

[Alexis88]

Este código que muestras difiere mucho del ejemplo que te mostré, además de que está incompleto.

¿Y si lo intentas hacer como te lo sugerí? No pierdes nada intentándolo. Ahí te dejé un link para que lo pruebes.

[pandora09]

Alexis88 gracias por responder y estar pendiente,

Si he tu codigo pero no me arroja nada, es mas ni siquiera me agrega las filas. No se si te comente anteriormente pero creo las filas de manera dinamica con js. Este es todo mi codigo js para agregar filas, calcular subtotal, total y eliminar filas lo que me falta es que reste el valor de la fila eliminada al campo del total esto solo lo hace bien cuando tengo un solo producto agregado pero si tengo dos o mas me devuelve NaN.

Este es el codigo js.

Código Javascript:

var campo1 = document.createElement("select");
        campo1.type = "select";
        campo1.name = "servicio[]";
        for (i=0; i<28; i++) {
        opt = document.createElement('option');
        opt.value = myarray[i];
        opt.innerHTML = myarray[i];
        campo1.appendChild(opt);
        }
        campo1.size = "1";
 
    var miarray=new Array(3)
    miarray[0] = "0"
    miarray[1] = "1"
    miarray[2] = "2"
    miarray[3] = "3"
    miarray[4] = "4"
    miarray[5] = "5"
 
    var campo2 = document.createElement("select");
        campo2.type = "select";
        campo2.name = "cantidad[]";
        campo2.id = "cantidad";
        for (i=0; i<6; i++) {
        opt = document.createElement('option');
        opt.value = miarray[i];
        opt.innerHTML = miarray[i];
        campo2.appendChild(opt);
        }
        campo2.size = "1";
        campo2.style.width = "50px";
 
    var campo3 = document.createElement("input");
        campo3.type = "text";
        campo3.name = "preciounit[]";
        campo3.id = "preciounit";
        campo3.placeholder = "0,00";
        campo3.style.textAlign = "right";
        campo3.setAttribute("onChange","Calcular(this);");
    
    var campo4 = document.createElement("input");
        campo4.type = "text";
        campo4.name = "totalitem[]";
        campo4.id = "totalitem";
        campo4.class = "costo";
        campo4.placeholder = "0,00";
        campo4.readOnly = "true";
        campo4.style.textAlign = "right";
    
    var campo5 = document.createElement("input");
        campo5.type = "image";
        campo5.src = '14.png';
        campo5.style.background = "#143D55";
        campo5.style.border = "1px solid #320C83";
        campo5.style.borderRadius = "100px";
        campo5.style.marginLeft = "60px";
        campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            var total = document.getElementById("total");
            if (total.innerHTML == 'NaN') {
            total.innerHTML = 0;
            }
            total.innerHTML = (Number(total.innerHTML)-Number(totalitem.value)).toFixed(2);
 
            tbody.removeChild(fila);
 
            }
 
    
    celda1.appendChild(campo1);
    celda2.appendChild(campo2);
    celda3.appendChild(campo3);
    celda4.appendChild(campo4);
    celda5.appendChild(campo5);
 
}
 
function vaciar_campo(input) {
    
    input.value = "";
    
}
 
function Calcular(ele) {
var cantidad = 0, precunit = 0, totalitem = 0;
var tr = ele.parentNode.parentNode;
var nodes = tr.childNodes;
for (var x = 0; x<nodes.length;x++) {
if (nodes[x].firstChild.name == 'cantidad[]') {
cantidad = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'preciounit[]') {
preciounit = parseFloat(nodes[x].firstChild.value,10);
}
if (nodes[x].firstChild.name == 'totalitem[]') {
totalitem = parseFloat(preciounit*cantidad).toFixed(2);
nodes[x].firstChild.value = totalitem;
}
}
var total = document.getElementById("total");
if (total.innerHTML == 'NaN') {
total.innerHTML = 0;
}
total.innerHTML = (Number(total.innerHTML)+Number(totalitem)).toFixed(2);
}
 

Aun no he podido dar con el error no se porque me devuelve NaN cuando tengo dos productos o mas agregados y procedo a eliminarlos.

[Alexis88]

Fíjate que en la línea 65 estás intentando tomar el supuesto valor de totalitem que no existe pues dicha variable no contiene a ningún <input> para que intentes tomar su value; a lo mucho tendrá el último valor que se le haya asignado en el bucle de la función "Calcular".

Como no nos has mostrado la estructura de la tabla, supongo que por cada fila habrá un botón que la elimine. Lo que debes de hacer es simplemente ejecutar una función cuando se dé un clic en dicho botón, tomar el valor de la fila (que, por lo que veo, es el producto de dos valores de la fila), tomar el de la celda que contiene el acumulado, restárselo y luego eliminar la fila, todo en ese orden.

Trata de hacer las cosas con más orden; el no tener experiencia con esto no es excusa para trabajar en desorden. Si fuera necesario, haz todo ese bloque nuevamente. Es preferible hacer algo de forma limpia y ordenada que seguir liándose y enredando más lo mismo.

Saludos

[pandora09]

Bueno ya esta listo, ya esta parte del código funciona y hace lo que necesitaba muchas gracias Alexis88 por tu ayuda y paciencia

Así quedo

Código Javascript:

campo5.onclick = function() {
        
            var fila = this.parentNode.parentNode;
            var tbody = tabla.getElementsByTagName("tbody")[0];
            var total = document.getElementById("total");
            subtotal = fila.querySelector("#totalitem");
            if (total.innerHTML == 'NaN') {
            total.innerHTML = 0;
            }
 
            total.innerHTML = (Number(total.innerHTML)-Number(subtotal.value)).toFixed(2);
 
            tbody.removeChild(fila);
 
            }