title: Remove Dynamic Table row in jQuery isn't working
body: <p>I'm trying to make dynamic table with javascript that elements can be dynamically added and removed with it.
  Now, the remove function doesn't work probably.</p>
  
  <p>I've tried .parent().parent().remove(); </p>
  
  <p>.parents("tr").remove(); </p>
  
  <p>.closest("tr").remove();</p>
  
  <p>but they don't work.</p>
  
  <p>The code to append to table :</p>
  
  <p><code>$("table tbody").append("&lt;tr&gt;&lt;input type='hidden' name='label[]' value='" + $(".inputTitle").val() + "' /&gt;&lt;input type='hidden' name='htmlText[]' value=\"" + html + "\" /&gt;&lt;td&gt;" + html + "&lt;/td&gt;&lt;td&gt;" + $(".inputTitle").val() + "&lt;/td&gt;&lt;td&gt;" + typeName + " ( " + crArabic + " )&lt;/td&gt;&lt;td&gt;&lt;a class='btn btn-danger deleteRow'&gt;&lt;i class='fa fa-fw fa-times' aria-hidden='true'&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;");</code></p>
  
  <p>The Removal Code :</p>
  
  <pre><code>$("table tbody tr").on("click", ".deleteRow", function () {
      $(this).parent().parent().remove();
  });
  </code></pre>
  
  <p>The expected results to this is to add and remove table rows dynamically. However, the removing event isn't working.</p>