title: How to append a delete image/icon to image inside div using jquery
body: <p>I am trying to upload some images and display them inside an empty DIV and after uploading if I mouse hover on an image I should get a delete icon so that users should be able to delete it with an animation and move the next image to the deleted image position.</p>
  
  <p>How do I achieve that?</p>
  
  <p>This is how I am uploading and appending to the div container:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(function () {
       document.getElementById('Nextbutton').style.visibility = "hidden"; // show 
       $("#uploader").plupload({
           // General settings
           runtimes: 'gears,flash,silverlight,browserplus,html5',
           url: 'Test.aspx',
           max_file_size: '10mb',
           max_file_count: 20,
           chunk_size: '1mb',
           unique_names: true,
  
           filters: [
              { title: "Image files", extensions: "jpg,gif,png" },
              { title: "Zip files", extensions: "zip" }
          ],
  
  
           flash_swf_url: 'js/plupload.flash.swf',
  
  
           silverlight_xap_url: 'js/plupload.silverlight.xap'
       });
  
  
  
       $('form').submit(function (e) {
           var uploader = $('#uploader').plupload('getUploader');
  
           if (uploader.files.length &gt; 0) {
  
               uploader.bind('StateChanged', function () {
                   if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                       $('form')[0].submit();
                   }
               });
  
               uploader.start();
  
           }
           else
           //alert('You must at least upload one file.');
  
               return false;
       });
       var uploader = $('#uploader').plupload('getUploader');
  
       uploader.bind('FilesAdded', function (up, files) {
           //              jQuery('#container a').html('');
           $('#container &gt; *').remove();
           var i = 0;
           while (i++ &lt; up.files.length) {
               var ii = i;
               while (ii &lt; up.files.length) {
                   if (up.files[i - 1].name == up.files[ii].name) {
                       $.msgBox({
                           title: "Ooops",
                           content: "There is already an image with the same filename and cannot be added.",
                           type: "error",
                           showButtons: true,
                           opacity: 0.9,
                           autoClose: false
                       });
                       uploader.removeFile(up.files[ii]);
                   } else {
                       ii++;
                   }
               }
           }
           if (i &gt; 20) {
               $.msgBox({
                   title: "Info",
                   content: "Uuh! Please don't put me any more files.&lt;br&gt;Maximum Upload limit is only 20 Images.&lt;br&gt;Rest of the Images will be removed.",
                   type: "info",
                   showButtons: true,
                   opacity: 0.9,
                   autoClose: false
               });
               $('#uploader_browse').hide();
           }
       });
       uploader.bind('FilesRemoved', function (up, files) {
           if (up.files.length &lt; 20) {
               $('#uploader_browse').fadeIn("slow");
           }
       });
  
  
       uploader.bind('FileUploaded', function (up, file, res) {
           $('#container').append("&lt;div class='container a'&gt;&lt;a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "'  rel='prettyPhoto' target='blank'&gt;&lt;img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/&gt;&lt;/a&gt;&lt;/div&gt;");
  
  
  
           var $imageContainers = $('#container a');
  
           $imageContainers.each(function (index) {
               $(this).delay(index * 50).fadeTo(400, 0.5);
           });
  
           $imageContainers.mouseover(function () {
               $(this).css('opacity', 1);
               $(this).find('span.del').show();
           });
           $imageContainers.mouseout(function () {
               $(this).css('opacity', 0.5);
               $(this).find('span.del').hide();
           });
  
  
  
           if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
               document.getElementById('Nextbutton').style.visibility = "visible"; // show 
               showStickySuccessToast();
           }
           uploader.removeFile(file);
       });
  
   });
  
  
       function randomString(length) {
           var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
  
           if (!length) {
               length = Math.floor(Math.random() * chars.length);
           }
  
           var str = '';
           for (var i = 0; i &lt; length; i++) {
               str += chars[Math.floor(Math.random() * chars.length)];
           }
           return str;
       }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is my div where I am showing the Images:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;/div&gt;   
  </code></pre>