[SOLUCIONADO] Borrar elemento DIV

[Canyavall]

Hola a tod@s, antes de nada quiero deciros que es la primera vez que hago algo en javascript, soy programador php, html, java y abap, pero nunca antes habia tocado nada de javascript...

Actualmente estoy buscando - generando un código que me muestre una imagen seleccionada y la suba al sistema, por ahroa todo funciona perfecto, el único problema es que si selecciono una imagen, me la enseña, si luego selecciono otra, me enseña las dos...

Entiendo y veo que es por que al crear el nuevo elemento, lo único que hace, es crear tags <div>, uno para cada imagen, entonces veo que, o sustituyo el elemento creado o lo elimino y vuelvo a crearlo..., me he vuelto loco con el replacechild y el removechild... pero no consigo que me lo sustituya... os paso el trozo de código que tengo y a ver si me podéis decir donde falla.

Este es el código de prueba que uso para hacer las pruebas...

Código:

<?php
if (isset($_FILES['img1']['name']) || isset($_FILES['img2']['name'])) {
    move_uploaded_file($_FILES['img1']['tmp_name'], "moved/mierda.jpg");
    copy("uploads/img1.jpg", "moved/img1.jpg");
    unlink("uploads/img1.jpg");
    move_uploaded_file($_FILES['img2']['tmp_name'], "moved/mierda2.jpg");
    copy("uploads/img2.jpg", "moved/img2.jpg");
    unlink("uploads/img2.jpg");
}
?>
<form enctype="multipart/form-data" method="post" action="preres.php">
    <input type="text" id="title" name="title"><br>
    <input type="file" id="img1" name="img1"/>
    <output id="previmg1"></output>
    <input type="file" id="img2" name="img2" />
    <output id="previmg2"></output>
    <div class="row">
        <input type="submit" value="Upload" />
    </div>
</form>


<script>
    function fileSelect(evt) {
        if (window.File && window.FileReader && window.FileList && window.Blob) {

            var files = evt.target.files; 
            var file;
            var targetid = evt.target.id;
            var targetchild = 'prev' + targetid;
            file = files[0];    
            
            reader = new FileReader();
            reader.onload = (function (tFile) {
                return function (evt) {
                        
                    var div = document.createElement('div');
                    div.innerHTML = '<img style="width: 90px;" id = "thumb' + targetid + '" src="' + evt.target.result + '" />';
                    if (document.getElementById('thumb' + targetid) == null){
                        document.getElementById(targetchild).appendChild(div);
                    } else {
                        ************************
                        Has aqui llega perfecto, lo que viene después es lo que no me funciona...
                        ************************
                         var el = document.getElementById(targetid);
                         var padre = el.parentnode;
                         padre.removeChild(div);
*************************
                    }

                };
            }(file));
            reader.readAsDataURL(file);            
            resizeAndUpload(file, targetid);
      
        } else {
            alert('The File APIs are not fully supported in this browser.');
        }
    }
 
    function resizeAndUpload(file, name) {
 
        var reader = new FileReader();
        reader.onloadend = function() {
            var tempImg = new Image();
            tempImg.src = reader.result;
            tempImg.onload = function() {
                var MAX_WIDTH = 200;
                var MAX_HEIGHT = 200;
                var tempW = tempImg.width;
                var tempH = tempImg.height;
                if (tempW > tempH) {
                    if (tempW > MAX_WIDTH) {
                        tempH *= MAX_WIDTH / tempW;
                        tempW = MAX_WIDTH;
                    }
                } else {
                    if (tempH > MAX_HEIGHT) {
                        tempW *= MAX_HEIGHT / tempH;
                        tempH = MAX_HEIGHT;
                    }
                }

                var canvas = document.createElement('canvas');
                canvas.width = tempW;
                canvas.height = tempH;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(this, 0, 0, tempW, tempH);
                var dataURL = canvas.toDataURL("image/jpeg");

                var xhr = new XMLHttpRequest();
       
                var field= document.getElementById(name);
                field.value= field.defaultValue;
 
                xhr.open('POST', 'resizer.php', true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");       
                var data = 'nameimg=' + name + '&image=' + dataURL;
                xhr.send(data);
                

            }
 
        }
        reader.readAsDataURL(file);
    }
        
    document.getElementById('img1').addEventListener('change', fileSelect, false);
    document.getElementById('img2').addEventListener('click', clean, false);
    
</script>

Muchísimas gracias de antemano por la ayuda!

P.D: He mirado miles de artículos, consejos, demos.... debo ser muy cazurro pero no lo se hacer funcionar...

[ipraetoriux]

...podes optimar esa parte de codigo de esta forma...no es parentnode, es parentNode...

Código Javascript:

var elem = document.getElementById(targetid);
elem.parentNode.removeChild(elem);
 

--si sigue sin funcionar es por que tal vez, targetid es undefined, deberias hacer un console.log para ver que valor tiene targetid, en caso de ser undefined, estas pasando de forma errada el valor de dicha variable

[Canyavall]

Pues si, tenias razon, llamaba a un indefinido, con este cacho lo he arreglado, gracias!!

Código:

 var files = evt.target.files; 
            var file;
            var targetid = evt.target.id;
            var targetparent = 'prev' + targetid;
            var targetchild = "thumb" + targetid;
            var elparent = document.getElementById(targetparent);
            file = files[0];    
            
            reader = new FileReader();
            reader.onload = (function (tFile) {
                return function (evt) {                        
                    var div = document.createElement('div');
                    div.innerHTML = '<img style="width: 90px;" id = "thumb' + targetid + '" src="' + evt.target.result + '" />';
                    if (document.getElementById(targetchild) == null){
                       elparent.appendChild(div);
                    } else {                        
                         var el = document.getElementById(targetchild);
                         var padre = el.parentNode; 
                         padre.replaceChild(div,el);                   
                    }

                };