Eliminación de un nodo elimina otros nodos

[GROGUI2]

Buenas,

tengo un código para subir ficheros, que cada vez que comienzo una subida, se añade un div a un contenedor que tengo. Dicho div contiene basicamente el nombre del fichero que subo, un boton para cancelar la subida (que es un parrafo), y una barra de progreso <progress>, o u n gif animado en los navegadores q no soportan la barra..

cuando añado una nueva subida, guardo el nodo del div que acabo de añadir y de la barra de progreso. El contenedor lo tengo del últio hijo del contenedor global de subidas, y la barra es la unica barra q hay dentro de dicho hijo.

Cuando presiono el botón cancelar, elimino del DOM el div relativo a esa subida (nombre + boton de cancelar + barra de progreso).

Mi problema es que además de eliminarse dicho nodo, se eliminan todas las barras de progreso de los nodos que haya por encima (subidas comenzadas antes), pero solo se elimina la barra y no el nombre del fichero o el boton de cancelar, ya sean etiquetas <progress> o gif animados, se eliminan indiferentemente.

Aquí dejo mi código:

Código:

function DialogUploadFile(id)
{
	var idFSS = id;
	var $progressBarContainer;
	var $progressBar;
	var canceled = false;
	
	var dialogButtons = {};
	var xhr;
	var progressBarSupport = false;
	

	
	/*
		Function: beforeSubmit
		Función de rellamada con acciones a ser realizadas antes del envío del fichero

			Parameters:
				formData - Datos del formulario (manejador por el plug-in)
				jqForm	- Datos del formulario (manejado por el plug-in)
				options - Opciones de subida (manejado por el plug-in)

			Return:
				-
	*/
	function beforeSubmit(formData, jqForm, options) 
	{ 
		$('#progress').css({'display':'block'});
		this.filename = $('#file_' + formIdent).val().split('\\').pop().split('/').pop();

		// ProgressBar soportada por
		// Chrome (A partir de la versión 10)
		// Mozilla (A partir de la versión 6)
		// Opera (A partir de la versión 12)
		// Safari (A partir de la versión 6)
		// IE (No soportado aún)
		if (	(BrowserDetect.browser == "Chrome" && BrowserDetect.version >= "10") 	||
				(BrowserDetect.browser == "Firefox" && BrowserDetect.version >= "6") 	||
				(BrowserDetect.browser == "Opera" && BrowserDetect.version >= "12")  	||
				(BrowserDetect.browser == "Safari" && BrowserDetect.version >= "6")  	)
		{		
			// Create progress bar  
			progressBarSupport = true;
			var progress = $("#progress");  

			
			// Aqui es donde añado el div con el nombre del fichero, el botón de cancelar y la barra
			progress.append($("<div>\
								<p>" + this.filename + "</p>\
								<div class='cancelButton'>" + translate("Cancelar") + "</div>\
								<progress value=\"0\" max=\"100\"></progress>\
							</div>"));

			// Y aqui guardo el nodo que acabo de añadir, y la barra de progreso
			$progressBarContainer = $('#progress').find(':last-child');
			$progressBar = $($progressBarContainer).find(':last-child');
		}
		else
		{
			progress = $("#progress");
			progress.append($("<div>\
			<p>" + this.filename + "</p>\
			<div class='cancelButton'>" + translate("Cancelar") + "</div>\
			<div class='loadingBar'></div>\
			</div>"));
			$progressBarContainer = $('#progress').find(':last-child');	
		}
		
		$($progressBarContainer).find('.cancelButton').first().click(cancel);
	}
	
	function cancel(evt)
	{
		canceled = true;
		if(xhr!=undefined) xhr.abort();
		alert($(this).parent().html());
		$($progressBarContainer).remove();  // Aqui elimino el contenedor, he probado con $progressBarContainer y con $this.parent() (Padre del botón Cancel)
		//$(this).parent().hide();
		if(BrowserDetect.browser == "Explorer") $($hiddenFormToRemove).remove();
		if($('#progress').children().length==0)	$('#progress').css({'display':'none'});
	}
}

Es un poco extraño. Gracias!