add and delete row dynamically
<p>This is my js code:</p>

<pre><code>&lt;script&gt;
function add(){
  $('#myTable tr:last').after('&lt;tr&gt;&lt;td&gt;4&lt;span onclick="del()"&gt;del row&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;');
}
function del(){
  $(this).parent('tr').remove();
}
&lt;/script&gt;
</code></pre>

<p>and html:</p>

<pre><code>&lt;table id="myTable" border="1"&gt;
    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;span onclick="add()"&gt;add row&lt;/span&gt;
</code></pre>

<p>My add button work nice but my del button not work. When del row clicked nothing happened.</p>
