title: jquery dynamically add/delete sections of code
body: <p>I would like to use jQuery to dynamically add and remove sections of html to a page. I use <code>Clone()</code> and <code>insertAfter()</code> to add code. I am try to use <code>remove()</code> to remove section of html when a link is clicked (<code>x=delete</code>) but am having trouble identifying the section that should be deleted.  </p>
  
  <pre><code>&lt;script src="jquery/jquery.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  
  &lt;div id="thisIsJustAPlaceHolder"&gt;&lt;/div&gt;
  
  &lt;div id="thisIstheTemplate" class='blueBox'&gt;
      A text box: 
      &lt;input id="preName1" type="text" name="txt_first"/&gt;
      &lt;span  class='deleteBox'&gt;&lt;a href="#" class='deleteBox'&gt;X&lt;/a&gt;&lt;/span&gt;&lt;br/&gt;
      Radio Box
      &lt;input id="preRadio1" type="radio" name="rb_option1" value="option1" /&gt; Option 1
      &lt;input id="preRadio1" type="radio" name="rb_option1" value="option2" /&gt; Option 2
      &lt;br/&gt;
      &lt;input type="hidden" id="prehidden1"  value="dummy" name="txt_last"  /&gt;&lt;br/&gt;
  &lt;/div&gt;
  
  &lt;div class="thisIsJustAPlaceHolder"&gt;&lt;/div&gt;
  
  &lt;br/&gt;
  &lt;input id="Submit" type="submit" value="I need another box please" /&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  
      // append a new box
      $('#Submit').click(function() {     
           $('#thisIstheTemplate').clone()
                                  .removeAttr("id")                           
                                  .addClass("myClass")                            
                                  .insertAfter($('#thisIsJustAPlaceHolder'));
              return false;
          });   
  
      // delete box when X is clicked
      $('.deleteBox').click(function() {  
          // alert($(this).parent().get("class"));        
          // some code here...
          return false;
      });   
  
   }); 
  
  &lt;/script&gt;
  
  
  &lt;style&gt;
  
  .blueBox{
      border: 1px solid blue;
      width:  400px;
      padding: 20px;
      margin:  10px;
  }
  
  a.deleteBox{    
      float:right;
  }
  &lt;/style&gt;
  </code></pre>