用于自动加减的动态表

Question

我正在处理动态表。

有一个输入表格。在提交表单时，输入会自动添加到动态生成的表中（使用Vanilla JS）。数字内容会自动添加到总价值中。在删除行（任意）上，应从总数中自动减去该行的数值。

我唯一的问题是减法方面。我已经尝试了几种方法来获取包含每个已删除行的数值的单元格的innerHTML。

var total = 0;

function createCustomerRow() {    
    var Cname = document.getElementById("customer").value,
    Cemail = document.getElementById("email").value,
    Cphone = document.getElementById("phone").value,
    Cbalance = document.getElementById("balance").value,
    Cbalance = parseInt(Cbalance, 10);

    if ( Cname == '' || Cemail == '' || Cphone == '' || Cbalance == '' ) {
        alert("You are required to fill in all the fields");
    } else {
        var newRow = document.getElementById("tableContainer"),
            newCust = newRow.insertRow(tableContainer.length),
            cust = newCust.insertCell(0),
            email = newCust.insertCell(1),
            phone = newCust.insertCell(2),
            balance = newCust.insertCell(3),
            deleCust = newCust.insertCell(4);

        cust.innerHTML = Cname;
        email.innerHTML = Cemail;
        phone.innerHTML = Cphone;
        balance.innerHTML = Cbalance;
        deleCust.innerHTML = '<button id="deleteCust" onclick="deleteCustomer(this)">Delete</button>';
        newCust.style.backgroundColor = " bisque";
        newCust.style.border = "1px solid gray";
        newCust.style.width = "1400px";
        newCust.style.color = "red";
        cust.style.padding = "10px";
        cust.style.borderRight = "1px solid black";
        email.style.padding = "10px";
        email.style.borderRight = "1px solid black";
        phone.style.padding = "10px";
        phone.style.borderRight = "1px solid black";
        balance.style.padding = "10px";
        balance.style.borderRight = "1px solid black";
        cust.style.fontSize = "20px";
        email.style.fontSize = "20px";
        phone.style.fontSize = "20px";
        balance.style.fontSize = "20px";
        
        total += Cbalance;

        document.getElementById("second").innerHTML = total;

        clearInput();
        return false;
    }
}

function clearInput() {
    document.getElementById("customer").value = "";
    document.getElementById("email").value = "";
    document.getElementById("phone").value = "";
    document.getElementById("balance").value = "";
}


function deleteCustomer(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("tableContainer").deleteRow(i);
}

body {
	padding: 0px;
    margin: 0px;    
    height: auto;
}

table#tableContainer, table#total {
	width: 1400px;
	margin: auto;
	margin-top: 50px;
	padding: 10px;
    border-collapse: collapse;
}

table#total {
    margin-top: 0px;
    border: 1px solid black;
    width: 1400px;
}

.first, .second {
    border: 0;
}

.second {
    padding-left: 100px;
}


tr {
	width: 1200px;
}


th {
    width: 200px;
	padding: 10px;
	color: wheat;
	background-color: black;
	text-align: center;
	border: 1px solid burlywood;
}


#custInfo {
    width: 500px;
    height: auto;
    margin: 80px 0px 0px 100px;
    border: 1px solid greenyellow;
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    margin-bottom: 40px;
}

input[type="text"] {
    width: 400px;
    margin-left: 30px;
    padding: 10px;
    color: red;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
}

input[type="text"]:focus {
    background-color: bisque;
    color: blueviolet;
}

label, input[type="submit"] {
    margin-left: 30px;
    color: rgb(190, 81, 9);
}

input[type="submit"] {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
}

#deleteCust {
    color: rgb(190, 81, 9);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    margin-left: 100px;
}

<table id="tableContainer">
		<tr>
			<th class="display">Customer</th>
			<th class="display">Email</th>
			<th class="display">Phone</th>
			<th class="display">Balance</th>
			<th class="display">Action</th>
		</tr>
</table>

<table id="total">
    <tr>
        <th class="first">Total</th>
        <th class="first"></th>
        <th class="first"></th>
        <th class="second" id="second"></th>
        <th class="first"></th>
    </tr>
</table>
    
<div  id="custInfo">
    <label for="customer">Customer</label> <br />
    <input type="text" id="customer" name="customer"> <br /><br />
    <label for="email">Email</label> <br />
    <input type="text" id="email" name="email"> <br /><br />
    <label for="phone">Phone</label> <br />
    <input type="text" id="phone" name="phone"> <br /><br />
    <label for="balance">Balance</label> <br />
    <input type="text" id="balance" name="balance"> <br /><br />
    <input type="submit" id="custSubmit" value="submit" name="custSubmit" onclick="createCustomerRow()">
</div>

这是我Github上代码的链接。
https://github.com/layodaniel/crud

请帮助。我是编程新手。而且我必须已经提交这个项目。

谢谢。