how to fadeout multiple elements with javascript in onclick function - php

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

So let's say you have a delete button:
$deletebutton.on('click', function (e) {
$(e.currentTarget).fadeOut();
});
Recommended: console.log(e) - you can find many other items in there you can access that may be helpful
But what if you dont want to remove the item you clicked on?
change .fadeOut to...
$itemtoremove.fadeOut();

Answer 2

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);