想要在刪除鏈接上單擊時刪除添加到縮略圖的圖像

Question

圖像以縮略圖的形式添加，但刪除操作的代碼無法正常工作。這是我的代碼....
「span.innerHtml」中出現了一些問題，我知道......但無法解決它！
對於刪除操作的腳本，刪除不連接工作正常....但與圖像，因爲它無法工作縮略圖整合....

//select the files to be added 
<input type="file" id="files" name="files[]"/> 
<output id="list"></output> 

//code for delete operation(after onClick) 
<script> 
$(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(); 
        }); 
      }); 
    }); 

}); 

</script> 


//code to add images to thumbnails(before onClick) 
<script> 
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 = ['<a href="#" class="delete">Delete<img class="thumb" src="', e.target.result, 
        '" title="', escape(theFile.name), '" width="110" height="150"/></a>'].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); 

</script> 

Answer 1

採取它在某種程度上工作，它不是工作動態添加圖像，你應該改變如下：

$('a.delete').on('click',function(e){... 

到

$(document).on('click','a.delete', function(e){... 

這個選擇是不正確太一是你有沒有所謂的「形象」 CSS類：

$(this).closest('.image') 

應該（將其改爲發現，因爲它是一個子元素）：

$(this).find('img') 

否則請介紹一些細節是怎麼回事不工作。任何錯誤？

這完全是我寫的東西固定（十分感謝負）後的工作： http://jsfiddle.net/balintbako/EdkHN/

而且你可能想刪除整個跨度： http://jsfiddle.net/balintbako/EdkHN/1/