How to remove the dynamic rows created in jquery
<p>I am getting some records in php. At the bottom there is an 'Add More Rows', which clones the last row. There are some calculations also happening in this page. Now what i need is when i create add new rows, i need to show a 'x' mark at the end, and if i click that, it should delete the new created rows. How can i achieve that? My fiddle is below:</p>

<h3><a href="https://jsfiddle.net/euvof3xb/4/" rel="nofollow">FIDDLE</a></h3>

<p>This is the jquery script which creates the clone element</p>

<pre><code>$("#add_more").on('click', function(e) {
  e.preventDefault();
  var clone = $("#table tbody tr:last").clone();
  $("#table tbody").append(clone);
});

$("#submit").on('click', function(e) {
  e.preventDefault();
  alert($("#cart1").serialize());
});
</code></pre>