Javascript 插入行后无法按ID删除表行

希望有人能帮忙。我肯定我错过了一些简单的东西

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

它会删除最初在那里的行，但我添加的行会刷新页面，我会丢失所有其他添加的行

如何让delete按钮在不刷新页面的情况下删除已添加的行

<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>

var-id=0；
函数addHyperlink（）{
var table=document.getElementById（“表1”）；
var hyperlinkToAdd=document.getElementById（“hyperlinkAdd”）；
var hyperlinkNotesToAdd=document.getElementById（“hyperlinkNotesAdd”）；
var行=table.insertRow（-1）；
var hyperlinkRowId=“hyperlinkRowId”+id；
row.setAttribute（“id”，hyperlinkRowId，0）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“”
cell2.innerHTML=“”；
cell3.innerHTML=hyperlinkNotesToAdd.value；
hyperlinkToAdd.value=“”；
hyperlinkNotesToAdd.value=“”；
id++；
}
函数deleteElement（elID）{
var el=document.getElementById（elID）；
el.parentNode.removeChild（el）；
返回false；
}
添加超链接
aaa
bbb
ccc
ddd
eee
fff

您正在使用带有空href的

锚定

，这会导致页面刷新，请改用普通按钮。要删除，您可以将click listener附加到文档并查看它是否是一个按钮，然后获取最近的

tr

并删除该行

id

是唯一的，在

js

id中设置为

0

。但是，您的

html

已经具有带有

hyperlinkRowId3

的id。因此，如果单击添加3次，它将创建重复的id

var id=0；
函数addHyperlink（）{
var table=document.getElementById（“表1”）；
var hyperlinkToAdd=document.getElementById（“hyperlinkAdd”）；
var hyperlinkNotesToAdd=document.getElementById（“hyperlinkNotesAdd”）；
var行=table.insertRow（-1）；
var hyperlinkRowId=“hyperlinkRowId”+id；
row.setAttribute（“id”，hyperlinkRowId，0）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“删除”；
cell2.textContent=hyperlinkToAdd.value；
cell3.textContent=hyperlinkNotesToAdd.value；
hyperlinkToAdd.value=“”；
hyperlinkNotesToAdd.value=“”；
id++；
}
document.querySelector（'table'）。addEventListener（'click'，函数（e）{
如果（e.target.tagName==“按钮”）{
const tr=e.target.closest（'tr'）；
tr.remove（）；
}
});

添加超链接
去除
aaa
bbb
去除
ccc
ddd
去除
eee
fff
您正在使用带有空href的
锚定
，这会导致页面刷新，请改用普通按钮。要删除，您可以将click listener附加到文档并查看它是否是一个按钮，然后获取最近的
tr
并删除该行

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


var id=0；
函数addHyperlink（）{
var table=document.getElementById（“表1”）；
var hyperlinkToAdd=document.getElementById（“hyperlinkAdd”）；
var hyperlinkNotesToAdd=document.getElementById（“hyperlinkNotesAdd”）；
var行=table.insertRow（-1）；
var hyperlinkRowId=“hyperlinkRowId”+id；
row.setAttribute（“id”，hyperlinkRowId，0）；
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
cell1.innerHTML=“删除”；
cell2.textContent=hyperlinkToAdd.value；
cell3.textContent=hyperlinkNotesToAdd.value；
hyperlinkToAdd.value=“”；
hyperlinkNotesToAdd.value=“”；
id++；
}
document.querySelector（'table'）。addEventListener（'click'，函数（e）{
如果（e.target.tagName==“按钮”）{
const tr=e.target.closest（'tr'）；
tr.remove（）；
}
});

添加超链接
去除
aaa
bbb
去除
ccc
ddd
去除
eee
fff
您的代码存在多个问题，但您的第一个问题是，当您单击“删除”时，页面会刷新。这是因为链接的href属性设置为“”。将其设置为“#”，这样您就不会导航到同一页面，从而导致刷新。您的代码存在多个问题，但您的第一个问题是，当您单击“删除”时，页面会刷新。这是因为链接的href属性设置为“”。将其设置为“#”，这样您就不会导航到同一页面，从而导致刷新。谢谢。效果很好，您的反馈很有意义。：）不幸的是打嗝。我已经在ie11上测试过了，但它不起作用-对象不支持属性或方法“最接近”任何建议？我解决了ie11问题。我必须使用jscript，并且可以使用“最近的”，我找到了这个并更新了我的脚本[.谢谢。效果很好，你的反馈也很有意义。：）不幸的是，我在ie11上测试了这个，但它不起作用-对象不支持属性或方法“最近的”有什么建议吗？我解决了ie11的问题。我必须使用jscript，可以使用“最近的”，我发现了这个，并更新了我的脚本[。