Jquery add and remove several divs with one click
<p>here is the code:</p>

<pre><code>$('.add').click(function() {

var description = $('#description').val();
$(".append_data").append('&lt;div class="row" style="background: #e6e6e6; color: #666; border-bottom: solid 1px #fff;"&gt;&lt;div class="col-md-3"&gt;&lt;input type="text" name="1"&gt;&lt;/div&gt;&lt;div class="col-md-5"&gt;&lt;input type="text" name="2"&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;input type="text" name="3"&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;input type="text" name="4"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="remove"&gt;Remove&lt;/div&gt;');

});

$('.append_data').on('click', '.remove', function(e) {
    //alert('boom');
  e.preventDefault();
  $(this).closest('.row').remove();
  return false;
});
</code></pre>

<p>Here is the code's Fiddle:
<a href="https://jsfiddle.net/L7su5ke7/" rel="nofollow">https://jsfiddle.net/L7su5ke7/</a></p>

<p>It adds several divs , all right. But how I can delete those with one click - alas! I have not figured out ((
I have tried <strong>"closest"</strong> and <strong>"parents"</strong> both with no luck</p>