Inputs number: borrar inputs y actualizar total

[NueveReinas]

Hola gente!

Estoy armando un código que obtiene datos pasados por cookies y los refleja en un input de números. Esto tiene la opción de borrar el elemento que contiene ese input.

El problema es que al borrar ese elemento, la función para realizar la suma no refleja los cambios. Dejo un JSFiddle con un MCVE.

https://jsfiddle.net/43m3h8h7/

Al entrar, apreta la "x" para ocultar (y posteriormente borrar) el elemento y por lo tanto el input. No actualiza el total.

Cualquier ayuda es bienvenida.

jrasias d ante braso

[Alexis88]

Dos cosas:

1. Te faltó eliminar al elemento padre del botón de borrado:

Código Javascript:

esto.parent().remove();
 

2. Luego de la eliminación del elemento, debes ejecutar la llamada a la función en la misma función de completado del efecto:

Código Javascript:

esto.parent().css("opacity", "0.3").stop().slideUp(300, function() {
    esto.parent().remove();
    obtenerTotal();
});
 

[siddartha23]

Son dos cosas:

1) En la línea 14 la variable esto debería estar haciendo referencia al contenedor .elemento osea $(this).parent() ya que vas a necesitar acceder a ese elemento en dos ocasiones, uno, para ocultarlo visualmente y dos para eliminarlo junto a todos sus nodos.
En tu función, esto hace referencia al span y solo eliminas el span, por eso cuando vuelve a hacer la suma, sigue tomando en cuanta el input que se ocultó pero sigue en el DOM.

2) El callback de la función slideUp para saber en que momento se ha terminado la animación, se ejecuta con un timer, las otras funciones que estén en el mismo scope no esperan que se ejecute el callback para ejecutarse, es decir el slideUp y el obtenerTotal() se ejecutan casi al mismo tiempo antes de borrar el input, por eso necesitas mover tu función obtenerTotal() dentro de la función callback, luego de remover el elemento.

[NueveReinas]

Oh, por supuesto!! Ambos tenéis razón, muchísimas gracias. Solucionado entonces :)