如何在onclick函数中使用javascript淡出多个元素

Question

SOF users: today I have another challenge for you:

I have this piece of code, a part of jquery Uploader. Each file uploaded uses this code, where I create correct answer if file was uploaded ok or not.

When a file is uploaded ok, I put a delete button (cannot use form tag here). I want to add a fadeout effect.

EDIT: now all the interesting code.

<script>
    var conexion;
    var numarch = 0;
    var idactual = 0;
    function crearXMLHttpRequest(){
        var xmlHttp=null;
        if (window.ActiveXObject) 
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        else
            if (window.XMLHttpRequest) 
                xmlHttp = new XMLHttpRequest();
        return xmlHttp;
    }

    function borrar_archivo(iddiv, ruta, header){
        conexion=crearXMLHttpRequest();
        idactual = iddiv;
        conexion.onreadystatechange = procesarEventos;
        conexion.open(header, ruta, true);
        conexion.send(null);
    }

    function procesarEventos(){
        var detalles = document.getElementById(idactual);
        if(conexion.readyState == 4){
            var resultado = conexion.responseText;
            if(resultado.indexOf("true")!=-1){
                nomArchivo = conexion.responseText.split(":",1);
                nombreArchivo = nomArchivo[0].substring(1);
                detalles.innerHTML = "<p style='float: left; clear:left; color: #66CC00; font-size:12px;'>"+nombreArchivo+" ha sido borrado.";
            }
            else{
                detalles.innerHTML = "<p style='float: left; clear:left; font-size:12px;' class='text-danger'>Ha habido un error al borrar el archivo.</p>";
            }
        }
        else{
            detalles.innerHTML = "<p style='float: left; clear:left; font-size:12px;'>Cargando...</p>";
        }
        setInterval(function(){
             $("#"+idactual).fadeOut(1000);
        },1500);
    }

    $(function(){
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data){
                $.each(data.result.files, function (index, file) {
                    numarch++;
                    $('<div id="archivo_'+numarch+'" />').appendTo('#files');
                    if (file.error){
                        $('<img style="width: 16px; float: left; clear:left; margin-right: 10px;" src="img/x.png" title="Error" alt="Error"/>').appendTo('#archivo_'+numarch);
                        $('<p style="float: left; font-size:12px;" class="text-danger"/>').text(file.error).appendTo('#archivo_'+numarch);
                    }
                    else{
                        var newFileDiv = $("<img style='width: 16px; float: left;  clear:left; margin-right: 10px;' src='img/v.png' title='Archivo subido OK' alt='Archivo subido OK'/><p style='float: left; color: #66CC00; font-size:12px;'>"+file.name+"</p><div style='float :left; height: 5px;margin-left: 25px;' class='btn btn-danger delete' onclick=borrar_archivo('archivo_"+numarch+"','"+file.deleteUrl+"','"+file.deleteType+"')><i style='top: -5px;left: -5px;' class='glyphicon glyphicon-trash'></i><span style='top: -6px;position: relative;'>Borrar</span></div>");
                        $('#archivo_'+numarch).append(newFileDiv);
                    }
                });
            },
            progressall: function (e, data){
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').html(progress + '%');
                $('#progress .progress-bar').css('width',progress + '%');
            }
        });
    });
</script>

I just founded that I can "delete" one item ok. but when I use multiple buttons to delete a lot of items, the function breaks, only deleting last elements I clicked...

I want to do this fadeout effect asynchronous.(that is the reason for the setInterval instead setTimeout)...

But nothing works for me. Now I am little lost about this.

Any help, please?

EDIT 2:

Now, trying I find how to delete 2 or more items, but the fadeout() effect only works on first one:

function borrar_archivo(iddiv, ruta, header){
    conexion=crearXMLHttpRequest();
    idactual = iddiv;
    conexion.onreadystatechange = procesarEventos;
    conexion.open(header, ruta, true);
    conexion.send(null);
    setInterval(function(){
        $("#"+idactual).fadeOut(1000);
    },1500);
    setInterval(function(){
        $("#"+idactual).remove();
    },1000);
}

Any idea why this happend? and how to solve it?

Answer 1

Ok, until a lot of research, I founded the solution:

When you have a bunch of elements with a Delete button, all buttons calls to the same function: this is a problem when you work with timers, because when you are in "the waiting time" and you re-execute that timers, the inner action of the timer can be stopped(overwrited before has been sended).

The solution I found is this: put the wait time lesser than the fadeout time, not allowing the inner function to be stopped. Why this works? I don't know, but you can overclick the buttons and all the inner functions work.

I paste here my code. If you need more code to understand it, write it: idactual is the id name of the div to be faded out. numarc is the number used to identify each div: (e.g.: idactual = archivo_1 , numarch = 1)

setInterval(function(){
    $("#"+idactual).fadeOut(1500, function(){
        var i=0;
        for(i=1;i>numarc;i++){
            elemento=$(document).getElementById("archivo_"+i);
            texto = elemento.innerHTML;
            if(texto.indexOf("borrado")!=-1){
                elemento.remove();
            }
        }
    });
},100);