Ver Mensaje Individual
  #14 (permalink)  
Antiguo 14/04/2011, 16:19
Avatar de laratik
laratik
 
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 14 años, 9 meses
Puntos: 63
Respuesta: Necesito idea de como lograr un flujo continuo

Efectivamente disfruto de esto, de no ser así no lo haría. Para agregar la imagen lo haces por medio de DOM como el resto de elementos:

Código Javascript:
Ver original
  1. function setOutput(){
  2.     if(httpObject.readyState == 4){
  3.         var respuesta = httpObject.responseText.split(",");
  4.         var cont = document.createElement("div");
  5.         var res = document.getElementById("resultadosScan1");
  6.         var art = document.createElement("div");
  7.         var peso = document.createElement("div");
  8.         var precio = document.createElement("div");
  9.         var del = document.createElement("img"); //creo el div para eliminar
  10.         del.src = "eliminar.gif";
  11.         del.onclick = eliminar;
  12.         art.className = "articulo";
  13.         peso.className = "peso";
  14.         precio.className = "precio";
  15.         document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
  16.         document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
  17.         document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
  18.         art.innerHTML = httpObject.innerHTML= respuesta[0];
  19.         peso.innerHTML = httpObject.innerHTML= respuesta[1];
  20.         precio.innerHTML = httpObject.innerHTML= respuesta[2];
  21.         cont.appendChild(art);
  22.         cont.appendChild(peso);
  23.         cont.appendChild(precio);
  24.         cont.appendChild(del);
  25.         res.appendChild(cont);
  26.         sum = sum+parseInt(respuesta[2]);
  27.         document.getElementById("suma").value = sum;
  28.     }
  29.  
  30. }

Si eres observador te habrás fijado que aparte del elemento img, he creado un elemento div llamado cont (contenedor) al cual se agregan el resto de elementos (eso lo necesitamos para agrupar todos los elementos en un solo bloque y así facilitar su eliminación). Asignamos el src de la imagen y un evento onClick apuntando hacia la función eliminar.

Función eliminar:

Código Javascript:
Ver original
  1. function eliminar() {
  2.      var parent = this.parentNode;
  3.      var precio = parseInt(parent.childNodes[2].textContent);
  4.      var grandParent = parent.parentNode;
  5.      grandParent.removeChild(parent);
  6.      sum -= precio;
  7.      document.getElementById("suma").value = sum;
  8.  }

Deberemos hacer referencia a tres variables:
parent = elemento padre del elemento que disparo el evento (la imagen).
grandParent = elemento padre del padre del elemento que disparo el evento.
precio = tomamos el texto que contenga el hijo 2 (es decir el div que contiene el precio).
procedemos a remover de grandParent a parent, es decir removemos el contenedor de todos los elementos y ya para finalizar restamos el precio a la variable sum para luego mostrarla.

Repostería y demás:

Código CSS:
Ver original
  1. #resultadosScan1 img { margin-bottom: -5px; margin-left: 10px; cursor: pointer;}

Agrego estilo a la imagen para que se posicione como yo quiero y termino por adjudicarle un cursor pointer para dar un efecto de link.

Resultado:



Espero haber sido lo suficientemente claro en la explicación. Cualquier tipo de duda te sugiero recurras a este excelente manual y éxitos en tus próximos proyectos. SALUDOS.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.