在JavaScript中使用此刪除表格行

Question

我試圖構建一個事件，它將刪除我表格中的一行。在每一行中，我都有刪除按鈕，並且在點擊此行中的按鈕後，應該刪除適用的行。有沒有辦法使用'this'屬性來做到這一點？我嘗試計算行和按鈕的索引，但它太混亂了，我正在尋找更簡單的代碼。這是我到現在爲止，部分與'這'顯然不工作。你能否建議是否有類似的方法來選擇適用的行？

document.addEventListener("DOMContentLoaded", function() { 

    var buttons = document.querySelectorAll(".deleteBtn"); 

    function removeItem (e) { 

     var rows = document.querySelectorAll("tr"); 

     rows[this].parentNode.removeChild(rows[this]); 
    } 

    for (var i = 0; i < buttons.length; i++) { 
     buttons[i].addEventListener("click", removeItem); 
    } 
}) 

Answer 1

this將把您的.deleteBtn元素。假設這是您要刪除的行裏面，你需要遍歷了該元素的父母找到tr，然後將其刪除：

function removeItem(e) { 
    var tr = this; 
    while (tr.tagName != "TR") { 
     tr = tr.parentNode; 
     if (!tr) { 
      // Didn't find an ancestor TR 
      return; 
     } 
    } 
    tr.parentNode.removeChild(tr); 
} 

在現代瀏覽器，你可以改變removeChild行只是：

tr.remove(); 

...但我不得不承認，我不知道如何得到很好的支持（我在看你，微軟）。