Problema eliminazione div da pulsante

[PetraHawke]

Ciao, ho un bel problemino...
premetto che penso c'entrino le closure ma non ne sono certa (so poco delle closure)...

ho una pagina dove le persone possono aggiungere div per dire se parlano una lingua in piu, con l'immagine +, e questa mi crea appunto il div che contiene la select, il livello della lingua e l'immagine x, per eliminare tutto il div.

Come eliminare il div l'ho capito e funziona, l'unico problema l'ho quando devo assegnare l'evento onclick all'immagine x, nel momento dell'onclick sul +.
In pratica mi consente di eliminare solo l'ultima div, e non quelle precedenti, anche usando il metodo della closure in questo modo

document.getElementById(nomeDelete).onclick=(function(index){return function(){var elPadre=index+1; var dl='deleteL'+index; var sl='selectLingua'+elPadre; eliminaQC(dl,sl); numLingue=numLingue-1;}})(numDelete);

il mio codice è circa cosi circa

window.onload=function(){ document.getElementById('add').onclick=function(){/*tutto codice prima per creare div e via dicendo*/ var nomeDelete='del'+numLingue; /*codice per creare tag imma*/ document.getElementById(nomeDelete).onclick=/*codice per eliminare div con closure*/;} }

mi sono accorta che il problema è

document.getElementById(nomeDelete).onclick

e non quello che viene dopo...infatti anche mettendo ad esempio

document.getElementById(nomeDelete).onclick=function(){alert('pippo');}

mi va sempre e comunque l'ultimo, penso che il problema sia che nomeDelete varia per ogni x, per dire una x è nomeDelete='del1' la successiva 'del2' ecc...e probabilmente mi prende solo l'ultima

cosa strana però, pensavo che l'evento onclick fosse registrato fisso, cioè se io schiaccio +, lui mi crea il div e la x, e appena creato ok, poi ne creo un altro (prima poniamo 'del3' ora 'del4') e il del3 non mi va più e ovviamente nemmeno i precedenti, va solo l'attuale del4 e perciò sembrerebbe una specie di variabile l'onclick...

c'è un modo per far si che nomeDelete sia preso "fisso" e che non vari di momento in momento? Cioè c'è un modo per impostare un evento onclick per ogni immagine usando

document.getElementById(nomeDelete)

?

Ringrazio in anticipo per l'aiuto!

[cavicchiandrea]

Proviamo con un esempio posta il link alla pagina demo online, quello che hai scritto è incompressibile

[PetraHawke]

Proviamo con un esempio posta il link alla pagina demo online, quello che hai scritto è incompressibile

posto il codice della funziona allora, mi sono spiegata un po' male
si trova dentro a window.onload

//imposto il num delle lingue come var, che verrà incrementata piu sono le select 
//o diminuita se tolgo select
numLingue=1;
document.getElementById('nLingue').value=numLingue;




document.getElementById('addLingua').onclick=function(){
var numDelete=numLingue;
    numLingue=numLingue+1;
    document.getElementById('nLingue').value=numLingue;


  //mando a capo e creo una nuova div col numero della var numlingue
  var idDiv='selectLingua'+numLingue;
  var aggiungiDiv='<div id="'+idDiv+'"></div>';
  var addAll='<br>'+aggiungiDiv;
  document.getElementById('selectLingue').innerHTML=document.getElementById('selectLingue').innerHTML+addAll;






  // crea la select della selezione lingue 
  var nomeSelL='selLingua'+numLingue;
  
  var selectSel = document.createElement("select");
  selectSel.setAttribute("name", nomeSelL);
  selectSel.setAttribute("id", nomeSelL);
  
  document.getElementById(idDiv).appendChild(selectSel);




 //copio il contenuto della prima select nelle altre
  var selectS1 = document.getElementById("selLingua1");
  selectSel.innerHTML=selectS1.innerHTML;






 //metto il livello tra le due select
  document.getElementById(idDiv).innerHTML=document.getElementById(idDiv).innerHTML+' livello: ';






  //crea la select della selezione livello della lingua
  var nomeLivL='livLingua'+numLingue;
  
  var selectLiv = document.createElement("select");
  selectLiv.setAttribute("name", nomeLivL);
  selectLiv.setAttribute("id", nomeLivL);
  
  document.getElementById(idDiv).appendChild(selectLiv);


 //copio il contenuto della prima select nelle altre
  var selectL1 = document.getElementById("livLingua1");
  selectLiv.innerHTML=selectL1.innerHTML;






  //dopo le due select, nell'id che le comprende, aggiungo un icona per cancellare la div
  //dato che la prima div è un riferimento e non si toglie, non ci metto l'icona del delete
  //e perciò il conteggio delle div qua parte da 1, impostato all'inizio con il num delle lingue
  var nomeDelete='deleteL'+numDelete;
  aggiungiDelete='<img src="icone/per.png" id="'+nomeDelete+'" class="ico">';
  document.getElementById(idDiv).innerHTML=document.getElementById(idDiv).innerHTML+aggiungiDelete;
  alert(this);
  document.getElementById(nomeDelete).onclick=(function(index){return function(){alert(this+'ecco nd '+nomeDelete); var elPadre=index+1; var dl='deleteL'+index; var sl='selectLingua'+elPadre; alert('ecco sl'+sl+'ecco dl'+dl); eliminaQC(dl,sl); numLingue=numLingue-1;}})(numDelete);


}

sintesi: il problema sembra essere il nomeDelete del document.getElementById, che fa vedere l'onclick dell'elimina come se funzionasse solo quello dell'ultimo elemento creato tra le div delle lingue e nei precedenti x non funziona...

come nell'immagine
Cattura1.JPG

[cavicchiandrea]

Studiati questa discussione che potrebbe tornarti utile, resto del idea che un esempio online sia meglio perché verifichi che la console non dia errori, testi lo script, vedi il listato del documento e come viene modificato