How to delete the dynamically created image in the following code?
<p>This is where I dynamically create an image:</p>

<pre><code>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++) {
                    // Only process image files.
                    if (!f.type.match('image.*')) {
                        continue;
                    }
                    fileNames.push(f.name);
                    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;img class="thumb" id="',escape(theFile.name),'" src="',e.target.result,
                            '" title="', escape(theFile.name), '"/&gt;&lt;input class="delete" type="button" value="delete" name="',escape(theFile.name),'"/&gt;'].join('');
                            document.getElementById('list').insertBefore(span, null);
                        };
                    })(f);
                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
</code></pre>

<p>And this is where I want to delete the image when I press the button:</p>

<pre><code>$('#list').on("click",".delete",function(e){
                $(e.target).remove();

            });
</code></pre>
