title: Element is not defined jQuery $(element).remove()
body: <p>I have this JavaScript that adds a form field, along with a link to remove that field:</p>
  <pre><code>var fieldCount = 0;
  function addField() {
      var name = 'file' + fieldCount;
      var row = 'row' + fieldCount;
      var str = '&lt;p id=&quot;' + row + '&quot;&gt;&lt;label for=&quot;' + name + '&quot;&gt;File to upload: &lt;input type=&quot;file&quot; name=&quot;' + name + '&quot; id=&quot;' + name + '&quot; /&gt;(100MB max size) &lt;a onclick=&quot;removeRow(' + row + '); return false;&quot;&gt;[-]&lt;/a&gt;&lt;/label&gt;&lt;/p&gt;';
      fieldCount++;
      $(&quot;#fields&quot;).append(str);
  };
  function removeRow(id) {
      $(id).remove();
  };
  </code></pre>
  <p>Here is the markup:</p>
  <pre><code>&lt;form id=&quot;ajaxUploadForm&quot; action=&quot;&lt;%= Url.Action(&quot;AjaxUpload&quot;, &quot;Upload&quot;)%&gt;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;fieldset id=&quot;uploadFields&quot;&gt;
          &lt;legend&gt;Upload a file&lt;/legend&gt;
          &lt;div id=&quot;fields&quot;&gt;&lt;/div&gt;
          &lt;input id=&quot;ajaxUploadButton&quot; type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;            
      &lt;/fieldset&gt;
      &lt;a onclick=&quot;addField(); return false;&quot; id=&quot;add&quot;&gt;Add&lt;/a&gt;
      &lt;div id=&quot;resultBox&quot;&gt;
          &lt;p id=&quot;status&quot; style=&quot;margin:10px;&quot;&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>The <code>addFields</code> works as expected, but when I click the remove link firebug tells me that <code>row#</code> is not defined, where <code>#</code> is any number of the added fields.</p>
  <p>Any help would be appreciated!</p>