добавление расчета строк и помощь по добавлению/удалению строк

Я пытаюсь создать шаблон счета-фактуры, который будет рассчитывать сумму каждой строки, а также иметь возможность добавлять и удалять строки.

Мне удалось создать javascript, который добавляет новые строки, но я не могу понять, как удалить последнюю добавленную строку, а также как рассчитать общее количество каждой строки, а затем вычислить общее количество всех строк, мой код пока приведен ниже.

Может кто-нибудь помочь, пожалуйста

 <form method="post" action="" name="services">


<button type="button" onClick="addRow()">Add New Row</button>


<table class="table table-sm">


<thead>


<tr>


<td><strong>Service</strong></td>


<td class="text-xs-center"><strong>Service Price</strong></td>


<td class="text-xs-right"><strong>Total</strong></td>


</tr>


</thead>


<tbody id="maindata">


<tr id="newservicerow">


<td class="text-xs-center"><input type="text" pattern="[A-Za-z]" onkeydown="return /[a-z]/i.test(event.key)" onblur="if (this.value == '') {this.value = 'Type Letters Only';}" onfocus="if (this.value == 'Type Letters Only') {this.value = '';}" class="form-control" /></td> 


<td class="text-xs-center"><input type="number" min="0.01" step="0.01" name="form-control" class="form-control"/></td>


<td class="text-xs-right">£ROW CALCULATION</td>


</tr>


</tbody>


<tbody>


<tr>


<td class="highrow"></td>


<td class="highrow"></td>


<td class="highrow text-xs-right">Total: £CALCULATED FROM TOTAL ROWS ABOVE</td>


</tr>


</tbody>


</table>


</form>


<script>


function addRow() {


// Reference the first <tr> as row


var row = document.getElementById('newservicerow');


// Reference the first <tbody> as main


var main = document.getElementById('maindata');


// Clone row


var clone = row.cloneNode(true);


// Remove clone's id


clone.removeAttribute('id');


// Clean clone of any data


clone.querySelectorAll('input').forEach(function(inp) {


inp.value = ''


});


// Append clone as the last child of main


main.appendChild(clone);


}


</script>

HTML: Заранее спасибо

То, что вы пытаетесь сделать, было бы намного проще, если бы вы использовали такую структуру, как jQuery, для добавления/удаления строк. С точки зрения пользовательского интерфейса было бы лучше иметь форму ввода в одну строку и чтобы кнопка сохраняла содержимое в массив для расчета и отображения.

Когда строки отображаются, вы можете добавить кнопки к каждой строке для редактирования или удаления.

Эти кнопки можно привязать к индексу массива, чтобы вызывать правильные значения для редактирования/удаления. Затем вы можете перехватить событие отправки формы, чтобы закодировать данные из массива перед отправкой.

(Если вы не можете изменить серверную часть). Если вы можете изменить серверную часть, вы можете просто отправить массив в формате json и декодировать его на внутренней стороне.

Дайте мне знать, если вам все еще нужна помощь с этим.

Я делал то же самое много раз раньше.