javascript - insertRow 后无法按 ID 删除表行

Question

希望有人能帮忙。我确信我缺少一些简单的东西。

用户通过单击“添加”按钮添加行，然后如果需要删除它，则单击“删除”以删除该行。

它会删除最初的行中的行，但我添加的行，它会刷新页面，并且我会丢失添加的所有其他行。

如何在不刷新页面的情况下获得删除按钮来删除我添加的行？

<script>
var id=0;

function addHyperlink(){

    var table = document.getElementById("table1");
    var hyperlinkToAdd = document.getElementById("hyperlinkAdd");
    var hyperlinkNotesToAdd = document.getElementById("hyperlinkNotesAdd");
    var row = table.insertRow(-1);
    var hyperlinkRowId = "hyperlinkRowID" + id;
    row.setAttribute("id", hyperlinkRowId, 0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "<a href=\"\" onclick=\"return deleteElement   ('hyperlinkRowId" + id + "')\">delete</a>"
    cell2.innerHTML = "<a href=\"" + hyperlinkToAdd.value + "\" target='_blank'>" + hyperlinkToAdd.value + "</a>";
    cell3.innerHTML = hyperlinkNotesToAdd.value;
    hyperlinkToAdd.value = "";
    hyperlinkNotesToAdd.value = "";
    id++;
}

function deleteElement(elID){ 
    var el = document.getElementById(elID);
    el.parentNode.removeChild(el);
    return false;
}

</script>


<form class="form-inline">

        <input type="text" class="form-control" id="hyperlinkAdd" placeholder="Hyperlink">

        <input size="55" type="text" class="form-control" id="hyperlinkNotesAdd" placeholder="Notes" >

        <button type="button" class="btn btn-default" onclick="addHyperlink();">Add Hyperlink</button>
    </form>


<table border id="table1">


<tr id="hyperlinkRowId3">
  <td><a href="" onclick="return deleteElement 'hyperlinkRowId3');">remove</a></td>
  <td>aaa</td>
  <td>bbb</td>
</tr>
<tr id="hyperlinkRowId4">
  <td><a href="" onclick="return deleteElement('hyperlinkRowId4');">remove</a></td>
  <td>ccc</td>
  <td>ddd</td>
</tr>
<tr id="hyperlinkRowId5">
  <td><a href="" onclick="return deleteElement('hyperlinkRowId5');">remove</a></td>
  <td>eee</td>
  <td>fff</td>
</tr>

</table>

Answer 1

您正在使用带有空 href 的 anchor ，这会导致页面刷新，而应使用普通按钮。要删除，您可以将点击监听器附加到文档并查看它是否是一个按钮，然后获取最接近的 tr 并删除该行。

ids 是唯一的，在js 中，id 设置为0。但是，您的 html 已经具有 hyperlinkRowId3 的 id。因此，如果点击添加 3 次，就会创建重复的 id。

var id = 0;

function addHyperlink() {
  var table = document.getElementById("table1");
  var hyperlinkToAdd = document.getElementById("hyperlinkAdd");
  var hyperlinkNotesToAdd = document.getElementById("hyperlinkNotesAdd");
  var row = table.insertRow(-1);
  var hyperlinkRowId = "hyperlinkRowID" + id;
  row.setAttribute("id", hyperlinkRowId, 0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = "<button>Remove</button>";
  cell2.textContent = hyperlinkToAdd.value;
  cell3.textContent = hyperlinkNotesToAdd.value;
  hyperlinkToAdd.value = "";
  hyperlinkNotesToAdd.value = "";
  id++;
}

document.querySelector('table').addEventListener('click', function(e) {
  if (e.target.tagName == "BUTTON") {
    const tr = e.target.closest('tr');
    tr.remove();
  }
});

<form class="form-inline">
  <input type="text" class="form-control" id="hyperlinkAdd" placeholder="Hyperlink">
  <input size="55" type="text" class="form-control" id="hyperlinkNotesAdd" placeholder="Notes">
  <button type="button" class="btn btn-default" onclick="addHyperlink();">Add Hyperlink</button>
</form>
<table border id="table1">
  <tr id="hyperlinkRowId3">
    <td><button>Remove</button></td>
    <td>aaa</td>
    <td>bbb</td>
  </tr>
  <tr id="hyperlinkRowId4">
    <td><button>Remove</button></td>
    <td>ccc</td>
    <td>ddd</td>
  </tr>
  <tr id="hyperlinkRowId5">
    <td><button>Remove</button></td>
    <td>eee</td>
    <td>fff</td>
  </tr>
</table>

PS - 像 onclick 这样的内联事件处理程序很难管理。相反，您可以使用 addEventListener 添加事件。