在 JavaScript 中使用此删除 table 行

Question

我正在尝试构建一个事件，该事件会在我的 table.In 中的每一行中删除一行我有删除按钮，并且一旦单击该行中的按钮，就应删除适用的行。有没有办法使用 'this' 属性来做到这一点？我尝试计算行和按钮的索引，但它太混乱了，我正在寻找更简单的代码。这是我到目前为止得到的， 'this' 部分显然不起作用。您能否告知是否有与 select 适用行类似的方法？

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();

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

在 JavaScript 中使用此删除 table 行

Deleting table rows using this in JavaScript

javascript

rows

removechild