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

您使用的anchor带有空的href，这会导致页面刷新，请改用常规按钮。要进行删除，您可以将Click侦听器附加到文档上，看看它是否是一个按钮，然后获取最接近的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添加事件。

insertRow后无法通过ID删除表行

1 个答案: