title: jQuery syntax / logic query
body: <p>I've put some code together which partially works and throws up no errors in Firebug.</p>
  
  <pre><code>jQuery( document ).ready( function( $ ) {
  
      var i = jQuery('[name="reference[]"]').size() + 1;
  
      jQuery('a#add_reference').click(function() {
          input_code = '&lt;div class="reference"&gt;' +
              '&lt;input type="hidden" value="" name="reference[]" /&gt;' +
              '&lt;h3&gt;Reference #' + i + '&lt;/h3&gt;' +
              '&lt;div class="line double"&gt;' +
                  '&lt;label&gt;Author(s)&lt;/label&gt; &lt;input type="text" name="ref_authors" /&gt;' +
                  '&lt;label&gt;Publisher&lt;/label&gt; &lt;input type="text" name="ref_publisher" /&gt;' +
              '&lt;/div&gt;' +
              '&lt;div class="line double"&gt;' +
                  '&lt;label&gt;Publication Year&lt;/label&gt; &lt;input type="text" name="ref_pub_year" /&gt;' +
                  '&lt;label&gt;Page Number(s)&lt;/label&gt; &lt;input type="text" name="ref_page_nums" /&gt;' +
              '&lt;/div&gt;' +
              '&lt;div class="line"&gt;&lt;label&gt;Document Title&lt;/label&gt; &lt;input type="text" name="ref_doc_title" /&gt;&lt;/div&gt;' +
              '&lt;div style="clear:both;"&gt;&amp;nbsp;&lt;/div&gt;' +
              '&lt;p&gt;Click &lt;a href="javascript:void(0);" id="' + i + '_del_reference"&gt;here&lt;/a&gt; to remove Reference #' + i + '.&lt;/p&gt;' +
          '&lt;/div&gt;';
  
          jQuery(input_code).appendTo('#references_wrapper');
  
          i++;
      });
  
      jQuery('[id="' + i + '_del_reference"]').click(removeBox);
      jQuery('[id="1_del_reference"]').click(removeBox);
  
      var removeBox = function() {
          jQuery( this ).parents('div.reference').remove();
          return false;
      };
  
  
  });
  </code></pre>
  
  <p>Which accompanies the HTML:</p>
  
  <pre><code>&lt;div id="references_wrapper"&gt;
          &lt;p&gt;Click &lt;a href="javascript:void(0);" id="add_reference"&gt;here&lt;/a&gt; to add a new reference.&lt;/p&gt;
          &lt;div class="reference"&gt;
              &lt;input type="hidden" value="" name="reference[]" /&gt;
              &lt;h3&gt;Reference #1&lt;/h3&gt;
              &lt;div class="line double"&gt;
                  &lt;label&gt;Author(s)&lt;/label&gt; &lt;input type="text" name="ref_authors" /&gt;
                  &lt;label&gt;Publisher&lt;/label&gt; &lt;input type="text" name="ref_publisher" /&gt;
              &lt;/div&gt;
              &lt;div class="line double"&gt;
                  &lt;label&gt;Publication Year&lt;/label&gt; &lt;input type="text" name="ref_pub_year" /&gt;
                  &lt;label&gt;Page Number(s)&lt;/label&gt; &lt;input type="text" name="ref_page_nums" /&gt;
              &lt;/div&gt;
              &lt;div class="line"&gt;&lt;label&gt;Document Title&lt;/label&gt; &lt;input type="text" name="ref_doc_title" /&gt;&lt;/div&gt;
              &lt;div style="clear:both;"&gt;&amp;nbsp;&lt;/div&gt;
              &lt;p&gt;Click &lt;a href="javascript:void(0);" id="1_del_reference"&gt;here&lt;/a&gt; to remove Reference #1.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><em>THE PROBLEM</em> is that I can add references but can't delete them.</p>
  
  <p>Could someone please point out where I've gone wrong? Frustrating thing is I've done this kind of thing a few times (with slightly different effects) and I still can't get it working!</p>
  
  <p>Thanks in advance.</p>