title: delete button for current division in HTML using javascript or JQuery
body: <p>I made a dynamic form with an add button that creates a new division with the clone of the form but has a different ID. However, I also want to have a delete button with each division that removes the division that it is in, including the button itself. </p>
  
  <p>I am familiar with JQuery <code>.remove()</code> method but I am having trouble selecting the division that the button is in. </p>
  
  <pre><code>&lt;div id="attendees"&gt;
          &lt;div id="att1" class="attendee"&gt;
              &lt;form name="droplist" action="html_form_action.asp" method = "get"&gt;
                  &lt;fieldset&gt;
                      &lt;legend&gt;&lt;span class="legend"&gt;Filter&lt;/span&gt;&lt;/legend&gt;
                      &lt;label for="select"&gt;Category: &lt;/label&gt;
                      &lt;select id="select" size="1"  &gt;
                          &lt;option value=" " selected="selected"&gt; &lt;/option&gt;
                          &lt;option value="employees"&gt;Number of Employees&lt;/option&gt;
                          &lt;option value="hits"&gt;Hits on TechCrunch&lt;/option&gt;
                          &lt;option value="time_founded"&gt;Time Founded&lt;/option&gt;
                          &lt;option value="total_money"&gt;Total Money&lt;/option&gt;
                      &lt;/select&gt;
  
                      &lt;div id='radioContainer' style="display:block;"&gt;
                          &lt;input type="radio" id="condition"  name="button" value="more"/&gt; &lt;label for="condition"&gt; &gt; &lt;/label&gt;&lt;/br&gt;
                          &lt;input type="radio" id="condition1"  name="button" value="less"/&gt; &lt;label for="condition1"&gt; &lt; &lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div id='radioContainerTime' style="display:block;"&gt;
                          &lt;input type="radio" id="condition2"  name="button" value="later"/&gt; &lt;label for="condition"&gt; After &lt;/label&gt;&lt;/br&gt;
                          &lt;input type="radio" id="condition3"  name="button" value="earlier"/&gt; &lt;label for="condition1"&gt; Before &lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div id = "text_box" style="display:block;"&gt;
                          &lt;label for="input_value"&gt;Amount: &lt;/label&gt;
                          &lt;input type="text" id="box" name="input_value" value="textIn" /&gt;
                      &lt;/div&gt;
                      &lt;button&gt;remove&lt;/button&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;a href="#" class="add"&gt;Add more&lt;/a&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>My JavaScript so far is this:</p>
  
  <pre><code>$(function(){
   var template = $('#attendees .attendee:first').clone(),
       attendeesCount = 1;
  
   var addAttendee = function(){
       attendeesCount++;
       var attendee = template.clone().find(':input').each(function(){
           var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
           $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
           this.name = this.id = newId; // update id and name (assume the same)
       }).end() // back to .attendee
       .attr('id', 'att' + attendeesCount) // update attendee id
       .prependTo('#attendees'); // add to container
   };
  
   $('.add').click(addAttendee); // attach event
   }); 
  
  $("button").click(function () {
    $this.remove();
  });
  </code></pre>