Unable to delete table row by ID after insertRow

Question

Hoping someone can help. I'm sure it's something simple I am missing.

The user adds rows by clicking the add button, then later if they need to delete it, they click delete to remove that row.

It deletes the rows fine of the rows initially there but the rows I add, it refreshes the page and I lose any others that were added.

How can I get the delete button to delete the rows I have added without refreshing the page?

<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

You are using anchor with empty href which is causing the page to refresh, instead use normal buttons. For deletion, you can attach click listener to your document and see if it's a button, then get the closest tr and remove the row.

The ids are unique and in js id is set to 0. However your html already have id with hyperlinkRowId3. So, if the click add for 3 times, it will create duplicate id's.

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 - Inline event handlers like onclick are difficult to manage. Instead you can add event using addEventListener.