Dynamically add/remove rows from html table

First off, IDs must be unique, so why not use classes here instead?

Second, if you're using jQuery, then use jQuery.

Third, you need to use event delegation when dynamically adding elements, so try the following:

$('#myTable').on('click', 'input[type="button"]', function () {
    $(this).closest('tr').remove();
})
$('p input[type="button"]').click(function () {
    $('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" style="border: 1px solid black">
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" class="fname" />
        </td>
        <td>
            <input type="button" value="Delete" />
        </td>
    </tr>
</table>
<p>
    <input type="button" value="Insert row">
</p>

On each DeleteRow(tableId,Index) function you are passing table id and static index that's why document.getElementById("mytable").deleteRow(Index) first find table node then find no of tr element as children and assigns the index to tr element start from 0 and delete the matching index tr element.

Whenever you delete first row then it will matches the 0 index from 3 elements and deletes the first row. Now there are 2 tr left with index 0 and 1 dynamically assign by table but you trying to match with 1 and 2.

for deleting second row it will delete tr with index 1 (third tr) not the second tr.

for deleting third row actual index is 0 (after deleting 2 rows) and you are passing 1 because of this reason it wont find the matching index.

Here is Simple javascript soltution.

<script>

function delRow(currElement) {
     var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
     document.getElementById("myTable").deleteRow(parentRowIndex);
}

</script>

and html,

<table id="myTable" style="border: 1px solid black">
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
  <td><input type="text" id="fname"></td>
  <td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
</table>

here is jsfiddle exmple

Click Here