javascript - 单击按钮时从表中删除成员

Question

我试图在单击删除按钮时从表中删除成员，但无法定位主要父级以将其从 DOM 中删除。这是我到目前为止所做的。removeUser 目前正在返回所有索引。我该怎么做才能解决它？另外，当单击 HTML 中硬编码的 + 按钮时，我应该创建一个新行以附加到表格底部

    function CreateTable() {
        var members = [{
                "Team Member": "Erica Badu",
                "Email": "e.badu@example.com",
                "Permission Level": "Owner"
            },
            {
                "Team Member": "Pat Nelsson",
                "Email": "p.nelsson@example.com",
                "Permission Level": "Admin"
            },
            {
                "Team Member": "Pending acceptance",
                "Email": "j.dog@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Amy Namy",
                "Email": "a.namy@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Victor D.",
                "Email": "v.d@example.com",
                "Permission Level": "Standard"
            },
            {
                "Team Member": "Olly",
                "Email": "o.hunter@example.com",
                "Permission Level": "Standard"
            },

        ]

        var col = [];
        for (var i = 0; i < members.length; i++) {
            for (var key in members[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        var table = document.createElement("table");

        var tr = table.insertRow(-1);

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        for (var i = 0; i < members.length; i++) {

            tr = table.insertRow();

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell();
                tabCell.innerHTML = members[i][col[j]];
            }
        }

        var divContainer = document.querySelector(".table");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);

        $("tr td:nth-last-child(1)").append("<button> </button>");
        $("tr td:nth-last-child(1) button").addClass('remove');

        var removeUser = document.getElementsByClassName('remove');

        for (var i = 0; i < removeUser.length; i++) {
            const el = removeUser[i].closest('tr')
            console.log(el, 'hi')


            removeUser[i].addEventListener('click', function (e) {
                e.preventDefault
                console.log(removeUser[i].closest('tr'), 'CLOSEST')

            });
        }
    }
    CreateTable()

})

Answer 1

问题是因为您在事件处理程序中使用 removeUser[i].closest('tr') ，但当您在循环中调用它时，对原始目标的引用元素将会丢失。

除此之外，您还可以在事件处理程序周围使用闭包，或者更简单地，使用 this 关键字来引用单击的元素:

this.closest('tr').remove();

function CreateTable() {
  var members = [{
    "Team Member": "Erica Badu",
    "Email": "e.badu@example.com",
    "Permission Level": "Owner"
  }, {
    "Team Member": "Pat Nelsson",
    "Email": "p.nelsson@example.com",
    "Permission Level": "Admin"
  }, {
    "Team Member": "Pending acceptance",
    "Email": "j.dog@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Amy Namy",
    "Email": "a.namy@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Victor D.",
    "Email": "v.d@example.com",
    "Permission Level": "Standard"
  }, {
    "Team Member": "Olly",
    "Email": "o.hunter@example.com",
    "Permission Level": "Standard"
  }]

  var col = [];
  for (var i = 0; i < members.length; i++) {
    for (var key in members[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  var table = document.createElement("table");
  var tr = table.insertRow(-1);

  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  for (var i = 0; i < members.length; i++) {
    tr = table.insertRow();

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell();
      tabCell.innerHTML = members[i][col[j]];
    }
  }

  var divContainer = document.querySelector(".table");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);

  $("tr td:nth-last-child(1)").append("<button> </button>");
  $("tr td:nth-last-child(1) button").addClass('remove');

  var removeUser = document.getElementsByClassName('remove');

  for (var i = 0; i < removeUser.length; i++) {
    const el = removeUser[i].closest('tr')
    removeUser[i].addEventListener('click', function(e) {
      e.preventDefault();
      this.closest('tr').remove();
    });
  }
}

CreateTable();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table"></div>