I have created a dynamic table. On button click, the values are added to the table from the form. But my table is showing first empty row initially. Only after that first empty row of the table, dynamic rows are created. How to remove this first empty row? Please see the attached image.

@*============ form content ================*@
    <div class="container col-md-12">
        <div>
            <div class="col-md-4">
                @Html.DropDownList("MedicineId", null, htmlAttributes: new { @class = "form-control ddrel" })
            </div>
            <div class="col-md-6">
                @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control iamt" } })
            </div>
            <div class="col-md-2">
                <button type="button" class="button button3 btn-default btn-sm">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </div>
        </div>
    </div>
@*============= table ==============================*@
<table class="table table-condensed table-bordered"  id="selected_units">
    <thead>
        <tr>
            <th>Medicine</th>
            <th>Amount</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
@*===============================================*@
<script type="text/javascript">
    $('.button').click(function () {
        var reltype = $('.ddrel option:selected').text();
        var relname = $('.iamt').val();
    var newrow = '<tr><td>' + reltype + '</td><td>' + relname + '</td><td><input type="button" value="Delete" onclick="Remove(this)" /></td></tr>';
    $('#selected_units tr:last').after(newrow);
});