Necesito idea de como lograr un flujo continuo

[laratik]

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:

function setOutput(){
    if(httpObject.readyState == 4){
        var respuesta = httpObject.responseText.split(",");
        var cont = document.createElement("div");
        var res = document.getElementById("resultadosScan1");
        var art = document.createElement("div");
        var peso = document.createElement("div");
        var precio = document.createElement("div");
        var del = document.createElement("img"); //creo el div para eliminar
        del.src = "eliminar.gif";
        del.onclick = eliminar;
        art.className = "articulo";
        peso.className = "peso";
        precio.className = "precio";
        document.getElementById('outputText0').value = httpObject.innerHTML= respuesta[0];
        document.getElementById('outputText1').value = httpObject.innerHTML= respuesta[1];
        document.getElementById('outputText2').value = httpObject.innerHTML= respuesta[2];
        art.innerHTML = httpObject.innerHTML= respuesta[0];
        peso.innerHTML = httpObject.innerHTML= respuesta[1];
        precio.innerHTML = httpObject.innerHTML= respuesta[2];
        cont.appendChild(art);
        cont.appendChild(peso);
        cont.appendChild(precio);
        cont.appendChild(del);
        res.appendChild(cont);
        sum = sum+parseInt(respuesta[2]);
        document.getElementById("suma").value = sum;
    }
 
}
 

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:

function eliminar() {
     var parent = this.parentNode;
     var precio = parseInt(parent.childNodes[2].textContent);
     var grandParent = parent.parentNode;
     grandParent.removeChild(parent);
     sum -= precio;
     document.getElementById("suma").value = sum;
 }
 

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:

#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.