how to prevent page refresh when removing a row from a table with javascript?
<p>I have a web page with a table and a "remove row" link in each row of the table.  </p>

<p>Problem is, when I click to delete a row, the browser does a page refresh.  How do I prevent his from happening?</p>

<p>Here's a complete functioning HTML page.  Try it, scroll down to the rows, click a link causes the scrollbar to jump back up to the top:</p>

<p>NOTE: I'm using Firefox 11.</p>

<pre><code>&lt;SCRIPT language="javascript"&gt;

function deleteRow(rowID) {
  try {
    var table = document.getElementById("mytable");
    var iRowIndex = 0;
    while (iRowIndex &lt; table.rows.length) {
      var row = table.rows[iRowIndex];
      if (row.id == rowID) {
        table.deleteRow(iRowIndex);
      } else {
        iRowIndex++;
      }
    }
  } catch (e) {
    alert(e);
  }
}

&lt;/SCRIPT&gt;

&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;


&lt;table id="mytable"&gt;
  &lt;tr id="foo" &gt;
    &lt;td&gt;FOO&lt;/td&gt;
    &lt;td&gt;
       &lt;a href="#" onclick="deleteRow('foo')"&gt;remove&lt;/a&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="bar" &gt;
    &lt;td&gt;BAR&lt;/td&gt;
    &lt;td&gt;
       &lt;a onclick="deleteRow('bar')"&gt;remove&lt;/a&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Any ideas?</p>
