title: Jquery remove parent and children
body: <p>I have a text box that needs to be removed which works when there is no span wrapped around it so:</p>
  
  <pre><code>$(InputsWrapper).append('&lt;div class="input-group"&gt;
  &lt;input type="text" name="mytext[]" id="field_'+ FieldCount +'" 
  value="Text + FieldCount +'" class="form-control"/&gt;
  &lt;button class="removeclass"&gt;&amp;times;&lt;/button&gt;&lt;/div&gt;');
  x++;
  </code></pre>
  
  <p>I am using bootstrap so I want to be able to wrap it around a span so the button and text field is attached to each other so when I wrap it around a span and button like this:</p>
  
  <pre><code>$(InputsWrapper).append('&lt;div class="input-group"&gt;
  &lt;input type="text" name="mytext[]" id="field_'+ FieldCount +'" 
  value="Text '+ FieldCount +'" class="form-control"/&gt;
  &lt;span class="input-group-btn"&gt;
  &lt;button class="btn btn-default" type="button"&gt;
  &lt;a href="#" class="removeclass"&gt;&amp;times;&lt;/a&gt;&lt;/button&gt;&lt;/span&gt;&lt;/div&gt;');
  x++;
  </code></pre>
  
  <p>It doesn't remove the parent, I know why it doesn't work because the below is looking for a div as a parent to remove.</p>
  
  <pre><code>$("body").on("click",".removeclass", function(e){
      if( x &gt; 1 ) {
              $(this).parent('div').remove();
              x--;
      }
  </code></pre>
  
  <p>I'm not too good with jquery so I think I'm missing how to remove the div, span and button, how can I remove the div, span and button?</p>
  
  <p>I've tried to add span and div inside the remove function but only one or the other is being removed something like this:</p>
  
  <pre><code>$(this).parent('div','span').remove();
              x--;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>$(this).parent('div').parent('span').parent('button').remove();
  </code></pre>