Display image with delete button in each
<p>I have code that displays the image after selecting a file. However, I don't know how to go about deleting the display image. So, I'd like to have a delete button on each image so it can easily be deleted by the user. What to do?</p>

<pre><code>&lt;div id="list" style="width:800px;border:1pt solid black"&gt;&lt;/div&gt;
  &lt;script&gt;
        var x = 0;
        var y = 0;
        function handleFileSelect(evt) {


        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {


        if(x &gt; 9)
        {
            alert('Total of 10 Images are acceptable');
        }
        else
        {

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
            return function(e) {
              // Render thumbnail.
              var span = document.createElement('span');
              span.innerHTML = ['&lt;div id="image"&gt;&lt;img class="thumb" src="', e.target.result,
                                '" title="', escape(theFile.name), '"/&gt;&lt;/div&gt;'].join('');
              document.getElementById('list').insertBefore(span, null);   
            };
          })(f);

          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
        }
        y = i + x;
        x = 0 + y;
        i = 0;  
    }
      document.getElementById('files').addEventListener('change', handleFileSelect, false);
</code></pre>
