title: Can't delete dynamically added table row
body: <p>I am pretty new to jquery and I want to add and delete table rows by
  clicking the add or remove image.</p>
  
  <p>The adding button works perfectly and a manually added row with a delete button works perfectly, but if I add a new row and then click the delete button for the new row, it does nothing.</p>
  
  <p>I have tried searching google and testing all the answers but none seem to work for me.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
              $(document).ready(function(){
                      var idCount = 0;
                      idCount++;
                      var new_row="&lt;tr&gt;&lt;td&gt;&lt;span style='float:left; margin-left:20px;'&gt;IP:&amp;nbsp;&lt;/span&gt;&lt;input name='ipaddr' type='text' /&gt;&lt;/td&gt;&lt;td&gt;&lt;img src='images/delete.png' width='20px' height='20px' id='deleteRow' /&gt;&lt;/td&gt;&lt;/tr&gt;";
                      $("table#ipList img#addRow").click(function() {
                              $("table#ipList").append(new_row);
                      });
                      $("table#ipList img#deleteRow").click(function() {
                              //$("img#deleteRow").parents("tr").remove();
                              //$("img#deleteRow").parent().parent().last().remove();
                              $("img#deleteRow").last().parent().parent().remove();
                      });
              });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;table id="ipList"&gt;
              &lt;tr&gt;
                      &lt;td&gt;&lt;span style="float:left; margin-left:20px;"&gt;IP:&amp;nbsp;&lt;/span&gt;&lt;input name="ipaddr" type="text" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;img src="images/add.png" width="20px" height="20px" id="addRow" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                      &lt;td&gt;&lt;span style="float:left; margin-left:20px;"&gt;IP:&amp;nbsp;&lt;/span&gt;&lt;input name="ipaddr" type="text" /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;img src="images/delete.png" width="20px" height="20px" id="deleteRow" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>