title: remove label and button when button clicked
body: <p>I have made two labels(Label1 and Label 2 and two remove button for each labels) by using html, javascript and jquery for my learning purposes.</p>
  
  <p>Now I want the label and button to be removed when the cross button is clicked.</p>
  
  <p>I tried </p>
  
  <pre><code>$(".labels").closest().remove();
  </code></pre>
  
  <p>But it does not work. Please help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;!-- jQuery library --&gt;
  &lt;script
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Latest compiled JavaScript --&gt;
  &lt;script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;Page 2&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div class="container"&gt;
    &lt;div class="form-group row"&gt;
     &lt;div class="col-md-2 labels"&gt;
      &lt;label&gt;Label 1 &lt;/label&gt;
     &lt;/div&gt;
     &lt;div class="col-md-1" style="padding-bottom: 5px"&gt;
      &lt;button class="btn btn-danger btn-xs removeBtn"&gt;
       &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
      &lt;/button&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;script type="text/javascript"&gt;
    $(document)
      .ready(
        function() {
         var formGroupRowDiv = $(
           document.createElement('div')).attr(
           "class", 'form-group row');
         var labelTwoDiv = $(document.createElement('div'))
           .attr("class", 'col-md-2 labels');
  
         var removeBtnDiv = $(document.createElement('div'))
           .attr("class", 'col-md-1 removeBtn');
  
         labelTwoDiv.appendTo(formGroupRowDiv).html(
           '&lt;label&gt;Label 2&lt;/label&gt;');
  
         removeBtnDiv
           .appendTo(formGroupRowDiv)
           .html('&lt;button class="btn btn-danger btn-xs removeDate"&gt;'
               + '&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;'
               + '&lt;/button&gt;');
  
         $(formGroupRowDiv).appendTo('.container');
  
         $(".removeBtn").click(function(e) {
          e.preventDefault();
          $(".labels").closest().remove();
  
         });
        });
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>