removing text via applying onclick on anchor tag

Question

<td><input type="button" value="remove" onClick="removeBox(this.parentNode.parentNode.rowIndex); "/></td>

function removeBox(i)
        {
            document.getElementById("firstTbl").deleteRow(i);

        }

my this code is working where I can remove my entire tr but when I want same functionality in my link than its not working let me explain, when I want there should be a link with name remove as user clicks that underline link it delete that text I mean the entire tr like my previous work the only difference will be in that I was using onclick on button now it's on anchor tag

<td><a href="#" onclick="removeLink(this.parentNode.parentNode.rowIndex);">Remove</a></td>
function removeLink(i)
{
document.getElementByID('tab2').deleteRow(i);

}

above there is my code which is not working the same for anchor tag

Answer 1

You shouldn't use inline events. It's old style.

<a href="#" class="remove">Remove</a>

And in the JS with jQuery;

$('.remove').on('click', function (e) {
    e.preventDefault();

    $(this).closest('tr').remove(); // will delete the upper tr.
});

Answer 2

I STRONGLY suggest you return false on the click to stop the page from being reloaded or partially unloaded.

<td><a href="#" onclick="return removeLink(this.parentNode.parentNode.rowIndex);">Remove</a></td>
function removeLink(i) {
  document.getElementByID('tab2').deleteRow(i);
  return false
}