javascript - 如何使用Javascript从表中定位并删除一行？

Question

我想在单击删除按钮后从 tbody 的列表中删除特定行。你能帮我弄清楚如何让它与普通的 JavaScript 一起工作吗？我总是收到错误消息“无法获取/a”。

function updateUI() {
    var tbody = document.getElementById('entry-table');

    for (var i = 0; i < Storedcontact.length; i++) {
        var entry = Storedcontact[i];      

        var row = document.createElement("tr");
        row.innerHTML = `
        <td>${entry.name}</td>
        <td>${entry.surname}</td>
        <td>${entry.phone}</td>
        <td>${entry.email}</td>
        <td><a href="a" class="btn btn-danger btn-sm delete">Delete</a></td>
        <td><a href="a" class="btn btn-primary btn-sm edit">Edit</a></td>
        `;

        tbody.appendChild(row);


function clearFields() {
    document.getElementById("name").value = "";
    document.getElementById("surname").value = "";
    document.getElementById("phone").value = "";
    document.getElementById("email").value = "";
  }

  clearFields();

    }
}


tbody.addEventListener("click", function(ev) {
    ev.preventDefault()})

    function removeContact(event) {
        if (event.classList.contains("delete")) {
            event.parentElement.parentElement.remove();
        }
    }

Answer 1

所以基本上你还没有那么远。下面是如何做到这一点:

const btns = document.querySelectorAll('table td button'); // the delete buttons
for (let i=0; i < btns.length; i++) { // you can use the modern forEach but this is faster
  btns[i].addEventListener('click', function() { // trigger event when hitting each button:
    this.closest('tr').remove(); // remove the line
  });
}

<table>
  <tr><td>line1 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line2 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line3 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line4 </td> <td> more </td> <td> <button>remove</button></td></tr>
  <tr><td>line5 </td> <td> more </td> <td> <button>remove</button></td></tr>
</table>

您可以在MDN上阅读有关remove()的更多信息。以及 closest()也。享受代码!

请注意，closest() 是 not supported in IE 。这是一个根据您的目的模仿其功能的函数:

function closestParent(element, tagName){
    try{
        while(element.tagName != tagName.toUpperCase()) element = element.parentNode;
        return element;
    }
    catch(e){
        return null;
    }
}