How to recalculate after deleting part of the form using JavaScript / jQuery?

[pyninja38748]

I was wondering how is it possible to re-calculate when a part of the form gets deleted. My code as of now sums up all prices using JavaScript correctly however when a part of the form gets deleted, the price does not update accordingly.

I thought of using an array but unable to understand how can I tell it to “delete” a certain value when the specfic form part is deleted.

Part of my code can be checked in https://jsfiddle.net/drd1jnLf/

EDIT (9th September 2017)

One way to do it is add all values in an array and onclick, get index of class and deduct total from array[index]. Was able to make it work but whenever I update the price, I delete the class to not have the price repopulate however then it all stops working all together. My main issue lies in the code $(this).next().removeClass().end(); which can bee seen below:

$('.cross').click(function(){
    var index = $(".cross").index(this);
    totalPrice = totalPrice - priceArray[index];
    priceArray.splice(index,1);
    document.getElementById("totalPrice").innerHTML = "Total Price: OMR " + totalPrice;
    $(this).next().removeClass().end();
});

[pyninja38748]

I have worked it out as below.

$('.cross').click(function(){
		var index = $(".cross").index(this);
		totalPrice = totalPrice - priceArray[index];
		priceArray.splice(index,1);
		document.getElementById("totalPrice").innerHTML = "Total Price: OMR " + totalPrice;
		$(this).next().removeClass().addClass('changed').slideUp(500, function() {
			$(this).html('').end();
		});
		providePrice();
	});