title: Jquery add and remove several divs with one click
body: <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>