在JavaScript中使用此命令删除表行

Deleting table rows using this in JavaScript

本文关键字：命令 删除 JavaScript      更新时间：2023-09-26

我试图建立一个事件，将删除我的表中的一行。在每一行我有删除按钮和适用的行应该被删除，一旦按钮在这一行单击。是否有一种方法来做它使用'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);
    }
 })

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

…但我必须承认我不知道它有多受支持(我在看你，微软)。

相关文章：