title: how to use a form and controller to store inputs
body: <p>I'm currently working on a web app I'm stuck on deleting the elements that I have created. </p>
  
  <p>I'm using jQuery to display thumbnail pictures and I'm trying to include a hovering <code>X</code> to the top right corner that will <code>on-click</code> delete the thumbnail and the original file upload before sending the form.</p>
  
  <p>This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    // This is where I create the thumbnail:
    $('#uploadImage').on('change', function() {
      resizeImages(this.files[0], function(dataUrl) {
        $('#photo1').val(dataUrl);
        document.getElementById("uploadPreview").src = dataUrl;
      });
    });
  
    // This is where I am attempting to delete it:
    $('.hiddenImages .close').on('click', function() {
      var id = $(this).closest('.hiddenImages').find('img').data('id');
      alert('remove picture: ' + id);
      document.getElementById(".hiddenImages").remove();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="pictureHolders"&gt;
    &lt;div class="hiddenImages"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;img id="uploadPreview" data-id="photo-1" style="width: 100px; 
      height: 100px;" /&gt;
    &lt;/div&gt;
    &lt;div class="hiddenImages"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;img id="uploadPreview2" data-id="photo-2" style="width: 100px; 
        height: 100px;" /&gt;
    &lt;/div&gt;
    &lt;div class="hiddenImages"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;img id="uploadPreview3" data-id="photo-3" style="width: 
        100px; height: 100px;" /&gt;
    &lt;/div&gt;
    &lt;div class="hiddenImages"&gt;
      &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
      &lt;img id="uploadPreview4" data-id="photo-4" style="width: 100px; 
         height: 100px;" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="inputs"&gt;
    &lt;div&gt; Photo 1:
      &lt;input type="text" id="desc1" name="desc1" /&gt;
      &lt;input id="uploadImage" type="file" /&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="photos" id="photo1" name="photo1" value="" /&gt;
    &lt;br/&gt;
    &lt;div&gt; Photo 2:
      &lt;input type="text" id="desc2" name="desc2" /&gt;
      &lt;input id="uploadImage2" type="file" /&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="photos" id="photo2" name="photo2" value="" /&gt;
    &lt;br/&gt;
    &lt;div&gt; Photo 3:
      &lt;input type="text" id="desc3" name="desc3" /&gt;
      &lt;input id="uploadImage3" type="file" /&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="photos" id="photo3" name="photo3" value="" /&gt;
    &lt;br/&gt;
    &lt;div&gt; Photo 4:
      &lt;input type="text" id="desc4" name="desc4" /&gt;
      &lt;input id="uploadImage4" type="file" /&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="photos" id="photo4" name="photo4" value="" /&gt;
  
    &lt;br/&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated.</p>