Javascript - Delete last row in table and table.rows.length is giving me the wrong value

I created a table in HTML but I am dynamically adding rows that are editable so the user can add values to the table. If the user presses cancel, the table row they no longer want to add is removed from the table. However, I can't seem to figure out how to remove the table row when they press the cancel button. Additionally, I console logged table.rows.length and it outputs incorrect values. I have attached an image, to provide an example. For some reason, it's incrementing an additional "click" and decreasing the table value when I will press the button. When there are no entries in the table, it says the length is 2. And inside my eventlistener for the cancel button, it increments multiple times with different values.

Image: Image of table and console log of table.rows.length. After 3 clicks, the button deletes the table thead, which essentially deletes the whole table.

I have seen solutions saying to use table.deleteRow(tables.rows.length-1) but it doesn't work for me. To remove the table I am using table.deleteRow(-1);, which works initally but after the third time, I starts to delete about the row, click again and it deletes the thead section with the table titles which basically deleted the entire table.

How can I remove the final row in my table. Also why is tables.row.length giving me incorrect values? Any help would be greatly appreciated. I have been stuck on this for quite some time.

JS:

function addMilestone(){

//Get edit functionalty buttons
var save_btn = document.getElementById("milestone-save-btn");
var cancel_btn = document.getElementById("milestone-cancel-btn");
var btn_container = document.getElementById("milestone-btns-container");

// get notification popup for user 
var status = document.getElementById("status");

//Display the buttons
btn_container.setAttribute("style", "opacity:1");
// btn_container.setAttribute("style", "display:flex");
save_btn.setAttribute("cursor", "pointer");
cancel_btn.setAttribute("cursor", "pointer");

//Hide edit button
milestone_btn.setAttribute("style", "opacity:0");


//Add table row with editable textboxs
const table  = document.getElementById("milestone-table");
var row = table.insertRow(table.rows.length);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.setAttribute("style", "text-align:center");
cell1.setAttribute("contenteditable", true);
cell2.setAttribute("style", "text-align:center");
cell2.setAttribute("contenteditable", true);

//Add delete button row
var delete_span = document.createElement("span");
delete_span.className = "delete";
delete_span.setAttribute("style", "display:inline");
delete_span.innerHTML = "×"

cell3.appendChild(delete_span);

var deleteMilestone_btn = document.querySelectorAll(".delete");

deleteMilestone_btn.forEach(btn => {
    //Display all buttons
    btn.setAttribute("style", "display:inline");

    //If button is clicked, remove row from table
    btn.addEventListener("click", function(){
        var td = event.target.parentNode; //event.target is the input element
        var tr = td.parentNode; //the row we want to remove
        tr.parentNode.removeChild(tr);
}

        

//Cancel when clicked
cancel_btn.addEventListener("click", function(){

    console.log("clicked");
    console.log("Table : ", table.rows.length);


    //remove the table row added that wont be used
    table.deleteRow(-1);


    //remove buttons
    btn_container.setAttribute("style", "opacity:0");
    btn_container.setAttribute("style", "width:0");
    save_btn.setAttribute("cursor", "default");
    cancel_btn.setAttribute("cursor", "default");

    // Display Edit Button
    milestone_btn.setAttribute("style", "opacity:1");
});
}

HTML:

<!-- Table -->
<div class="milestone-container">
    <table id="milestone-table">
        <thead>
            <tr>
                <th>Milestones</th>
                <th>Progress</th>
                <th style="width: 5%;"></th>
            </tr>
        </thead>

        <tbody>
            <tr>
            </tr>

        </tbody>
    </table>
</div>

<div id="milestone-btns-container">
    <div class="editing-btns">
        <div id="milestone-cancel-btn">Cancel</div>
        <div id="milestone-save-btn">Save</div>
    </div>
</div>

<button id="milestone-btn">Add Milestone</button>

from Recent Questions - Stack Overflow https://ift.tt/3iZgV3S
https://ift.tt/eA8V8J