Databases
StackOverflow2013
Postsdbo
POWant to delete the images being added to the thumbnails when clicked on the delete link
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWant to delete the images being added to the thumbnails when clicked on the delete link
    text
    copied!<p>The images are being added as thumbnails, but the code for delete operation fails to work. This is my code....<br> something has gone wrong in the "span.innerHtml" I know...but not able to solve it!!<br> The script for delete operation as DELETE as link works fine....but when integrated with the images as thumbnails it fails to work....</p> <pre><code>//select the files to be added &lt;input type="file" id="files" name="files[]"/&gt; &lt;output id="list"&gt;&lt;/output&gt; //code for delete operation(after onClick) &lt;script&gt; $(document).ready(function(){ $('a.delete').on('click',function(e){ e.preventDefault(); imageID = $(this).closest('.image')[0].id; alert('Now deleting "'+imageID+'"'); $(this).closest('.image') .fadeTo(300,0,function(){ $(this) .animate({width:0},200,function(){ $(this) .remove(); }); }); }); }); &lt;/script&gt; //code to add images to thumbnails(before onClick) &lt;script&gt; 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; } 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;a href="#" class="delete"&gt;Delete&lt;img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '" width="110" height="150"/&gt;&lt;/a&gt;'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload