在JavaScript中使用此方法刪除表格行

Question

我正在嘗試建立一個事件，該事件將刪除表中的一行。每行中都有刪除按鈕，單擊該行中的按鈕后應刪除適用的行。 有沒有一種方法可以使用'this'屬性？ 我嘗試計算行和按鈕的索引，但是這太混亂了，我正在尋找更簡單的代碼。 這是我到目前為止所得到的，與“ 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();

...但是我不得不承認，我不知道它的支持程度如何（我在看着你，微軟）。