Add and remove table row using DOM Javascript

Question

I have problems making the delete button. Although I somehow managed to make it, after I click (use the delete button) that removes the table row that I click on this button ( save_button.addEventListener("click", hahah); ) stops working. That is the button that adds a new row in the table. I click it and nothing happens. Should I make the delete button some other way or is it something else? I am new in javascript so I would really appreciate your support.

var lastindex = 1;

var save_button = document.getElementById("contacts-op-save");

save_button.addEventListener("click", hahah); 

function hahah(event)
{
    var x1 = document.getElementById("first_n").value;
    var x2 = document.getElementById("last_n").value;
    var x3 = document.getElementById("e_mail").value;


    event.preventDefault();

    var table = document.getElementById("contacts-table");

    var row = table.insertRow(lastindex);

    lastindex++;

    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);


    cell1.innerHTML = lastindex-1;
    cell2.innerHTML = x1;
    cell3.innerHTML = x2;
    cell4.innerHTML = x3;
    cell5.innerHTML =  
    "<input id='edit-"+ (lastindex-1)  +"' value='Edit' type='button'/>" +
    "<input id='delete-"+ (lastindex-1) +"' value='Delete' onclick = 
    'deleteRow(this)' type='button'/>" +
    "<input id='save-"+ (lastindex-1) +"' value='Save' type='button'/>";        

    var saveBtn = document.getElementById("save-"+ (lastindex-1));
    saveBtn.style.display = "none";

    var editBtn = document.getElementById("edit-"+ (lastindex-1));

    var deleteBtn = document.getElementById("delete-"+ (lastindex-1));



    editBtn.addEventListener("click", function(){
        saveBtn.style.display = "inline";
        editBtn.style.display = "none";
        document.getElementById("delete-" + (lastindex-1)).style.display = 
    "none";
        var inputFirstName = document.createElement("input");
        inputFirstName.type = "text";
        inputFirstName.id   = "first_name-" + (lastindex-1);
        inputFirstName.value = x1;
        cell2.innerText = "";
        cell2.appendChild(inputFirstName);

        var inputLastName = document.createElement("input");
        inputLastName.type  = "text";
        inputLastName.id    = "last_name-" + (lastindex-1);
        inputLastName.value = x2;
        cell3.innerText = "";
        cell3.appendChild(inputLastName);

        var inputEmail = document.createElement("input");
        inputEmail.type = "text";
        inputEmail.id = "email-" + (lastindex-1);
        inputEmail.value = x3;
        cell4.innerText = "";
        cell4.appendChild(inputEmail);



});
saveBtn.addEventListener("click", function()
{
    saveBtn.style.display = "none";
    deleteBtn.style.display = "inline";
    editBtn.style.display = "inline";
    var first_name = document.getElementById("first_name-" + (lastindex-
    1)).value;
    var last_name = document.getElementById("last_name-" + (lastindex-
    1)).value;
    var edited_email = document.getElementById("email-" + (lastindex-
    1)).value;

    cell1.innerHTML = lastindex-1;
    cell2.innerHTML = first_name;
    cell3.innerHTML = last_name;
    cell4.innerHTML = edited_email;

    })

}

   function deleteRow(row)
   {
     var d = row.parentNode.parentNode.rowIndex;
     document.getElementById('contacts-table').deleteRow(d); 
   }

Answer 1

I suspect the issue is with this line

var row = table.insertRow(lastindex);

Since you are also removing a row, your lastindex value may not be reflecting the correct value since as per doc

row is assigned a reference to the new row. A reference to HTMLTableRowElement. If index is -1 or equal to the number of rows, the row is appended as the last row. If index is greater than the number of rows, an IndexSizeError exception will result. If index is omitted it defaults to -1.

Just make it

var row = table.insertRow( -1 ); 

to make sure that row is inserted at the end only .