Question

I have many images which are created dynamically and I am showing them inside an empty div.
And now I have a <span>tag where I am showing the delete button to delete the image with small fading animation.
Now when I click nothing happens! I am not very much sure what I’m doing?

So I need your help!

Here is my code:

Css:

<style type="text/css">
#container 
{

border:dashed 7px #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 25px;
    width: 360px;
    height: 285px;
    position:absolute;
    left:520px;
    top:120px;
    padding: 0 0 5px 0;


}
#container a 
{
    position:relative; 
    border: 1px solid blue;
    float: left;
    display: block;
    width: 64px; height: 64px;
    margin: 5px 0 0 5px
}
#container a:visited {
    border: 1px solid #90f
}
#container img {
    border: 0;
}

#container a span { display:none; background-image:url(images/delete.gif); background-repeat:no-repeat; width:16px; height:16px; position:absolute; right:0px; top:0px;} 
#container a:hover span { display:block;} 
</style>

Script:

<script>
$("a span").click(function() {
    $("#container img").fadeOut("normal", function() {
        $(this).remove();
    });
});
</script>

Container to display Images:

<div id="container">

</div>

This is the script where I am using Plupload to upload Images and displaying:

   <script type="text/javascript">
    $(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 > 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 > *').remove();
            var i = 0;
            while (i++ < up.files.length) {
                var ii = i;
                while (ii < 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 > 20) {
                $.msgBox({
                    title: "Info",
                    content: "Uuh! Please don't put me any more files.<br>Maximum Upload limit is only 20 Images.<br>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 < 20) {
                $('#uploader_browse').fadeIn("slow");
            }
        });


        uploader.bind('FileUploaded', function (up, file, res) {
            $('#container').append("<div class='container a'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='blank'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/></a></div>");


            $("#container a").append("<span></span>");
            $("#container a").hover(function () {
                $(this).children("span").fadeIn(200);
            }, function () {
                $(this).children("span").fadeOut(600);
            });


            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 < length; i++) {
             str += chars[Math.floor(Math.random() * chars.length)];
         }
         return str;
     }

    </script>

Answer 1

I’ve not used your script for building images but I’ve emulated it and just created result html. And here is the script for deleting with fading:

$(".container a span").click(function() {
    $(this).closest('div.container').fadeOut("normal", function() {
        $(this).remove();
    });
    return false;
});

Also, in your script use current instance of the created items to work with:

var $currentTile = $('#container').append("<div class='container a'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='blank'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/></a></div>");
$currentTile .... // work with this instance

Code: http://jsfiddle.net/XBB6y/1/