How to delete a table row on button click of corresponding row?
<p>This is my code:
    </p>

<pre><code>    function deleteHostTable(src) {
        var table = src.parentNode.parentNode.parentNode;
        if(table.rows.length &gt; 1) {             
            table.deleteRow(src.parentNode.parentNode);
        }
         }
    function addHost(src) {
         var table = src.parentNode.parentNode.parentNode;
        var newRow = table.insertRow(table.rows.length-1);

        var cell = newRow.insertCell(newRow.cells.length);

        cell.innerHTML = '&lt;input type="hidden" name = "vtierIdH" value = "vtierId" /&gt;'

        cell = newRow.insertCell(newRow.cells.length);
        cell.innerHTML = '&lt;img src="images/minus.gif" onclick="deleteHostTable(this);return false;"/&gt;';

        cell = newRow.insertCell(newRow.cells.length);
        cell.className = "pagetitle";
        cell.innerHTML = '&lt;input type = "text" value="hstst" /&gt;';
    }
&lt;/script&gt;
&lt;html&gt;
&lt;table id="host#1" index="1"&gt;
        &lt;tr&gt;
            &lt;td colspan="10"&gt;
            &lt;h2 align="left" class="pagetitle"&gt;Sub Account Hosts:&lt;/h2&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;input type="hidden" name="vtierIdH" value="&lt;%=vtierId %&gt;" /&gt;

            &lt;td&gt;&lt;button id="minus" onclick="deleteHostTable(this);"/&gt;&lt;/td&gt;
            &lt;td class="pagetitle"&gt;&lt;input type="text" value="hstst" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;button  onclick="addHost(this);"&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/html&gt;
</code></pre>

<p>Now, when i click the button corresponding to a button, this code deletes the uppermost row
and not the row corresponding to that button which is clicked. How can i delete the row corresponding to the button in that row? </p>
