DOM Javascriptを使用してテーブル行を追加および削除する

Question

削除ボタンの作成に問題があります。私は何とかそれを作ることができましたが、このボタン（save_button.addEventListener("click", hahah);）をクリックしたテーブル行を削除する（削除ボタンを使用）をクリックすると、作業が停止します。これは、テーブルに新しい行を追加するボタンです。私はそれをクリックして何も起こりません。私は削除ボタンを何か他の方法で作るべきか、それとも何か他のものですか？私はjavascriptで新しいので、本当にあなたのサポートに感謝します。

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

私は問題が

var row = table.insertRow(lastindex); 

あなたは、行を削除しているので、あなたのlastIndexの値が正しい値を反映することはできません。このラインである疑い以来としてdoc

あたり行には新しい行への参照が割り当てられます。 HTMLTableRowElementへの参照です。 indexが-1または行数に等しい場合は、 行が最後の行として追加されます。インデックスが 行数より大きい場合、IndexSizeError例外が発生します。インデックスが の場合は省略され、デフォルトは-1になります。

だけ行は最後だけに挿入されていることを確認すること

var row = table.insertRow(-1); 

します。