Newsgroup: it.comp.lang.javascript
Titolo: Append/Remove child in una lista ordinata.

Ho una lista <ol> a cui posso aggiungere dinamicamente degli elementi
<li>.
Clono questo nodo che uso come modello:
----------------------------------------------------------------
<div style="display:none;">
    <li id="clone_model">
        <input name="TxtKeywords" type="text" class="td" size="30"
value="" maxlength="200" />&nbsp;
        <a href="#"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);"
title="Elimina parola chiave"><img style="border:0;" src="<%=BtnMinus
%>" alt="Meno" /></a>
    </li>
</div>
----------------------------------------------------------------
E uso un pulsante che clona usando questo codice:
----------------------------------------------------------------
var cloned=document.getElementById('clone_model').cloneNode(true);
cloned.removeAttribute('id');
this.parentNode.appendChild(cloned);
----------------------------------------------------------------
Le perplessità sono 2:
1) Su FireFox non funziona come Append ma piuttosto come insert.
Infatti se su IE7 l'elemento aggiunto viene messo in fondo alla lista,
su FF viene aggiunto in prima posizione.
2) Su Internet Explorer 7 l'indice di ordinamento dei <li> non cambia!
Resta sempre "1" per tutti i <li> che creo!
Mi chiarite i dubbi e mi date un'eventuale soluzione, perfavore?
Grazie :-)
Pictor

 Mi chiarite i dubbi e mi date un'eventuale soluzione, perfavore?
Questo il codice che ho testato:
<script type="text/javascript">
	function addKeywordField(){
		var 	myol = document.getElementById("myol"),
			li = myol.getElementsByTagName("li")[0];
		myol.appendChild( li.cloneNode(true) );
	}
</script>
 
<ol id="myol">
    <li>
        <input name="TxtKeywords" type="text" class="td" size="30"
value="" maxlength="200" />&nbsp;<a href="#" title="Elimina parola
chiave">Click</a>
    </li>
</ol>
<input type="button" onclick="addKeywordField()" value="Add Keyword"
/>
Per la parte di rimozione del campo, basta che il primo campo non
abbia visibile il link, oppure se esiste solo un "li" all'interno
della tua lista, nascondi l'OL oppure avvisi l'utente che non può
essere rimosso, vedi tu.
-- 
~ Neanche il futuro e' piu' quello di una volta.

 si presenta. Ma onor del vero ho provato su IE6 non su IE7.
Infatti su IE6 funziona bene, come su FF.
E' su IE7 che non sembra capire che i LI fanno parte della stessa OL.
Non capisco che tipo di problema possa essere.
Immagino che clonando tutto l'elemento cloni anche l'indice, ma
nell'appendChild immaginavo lo sistemasse da solo, come fanno FF ed
IE6 (ed è grave se è 'regredito'!).

 E' su IE7 che non sembra capire che i LI fanno parte della stessa OL.
Ho appena provato su IE7 lo stesso codice che ti ho scritto nel
precedente post, e funziona esattamente come su IE6 e FF.
Tu l'hai testato il mio esempio?
-- 
~ "L'arte non riproduce cio' che e' visibile, ma rende visibile cio'
che non  sempre lo e'" (Paul Klee)

 Tu l'hai testato il mio esempio?
No, scusami. E' la metodologia che è differente in quanto appunto il
primo elemento è diverso dai seguenti.
Grazie,
Pictor

Mmmmh.... è più rognoso di quanto pensassi.
Ho tentato di duplicare il primo elemento della lista, come mi avevi
detto.
Ho provato a fare così:
<script ...>
function RemoveItem(li)
{
    this.parentNode.parentNode.removeChild(this.parentNode);
}
function AddItem(li_model)
{
    var cloned=li_model.cloneNode(true);
    cloned.onclick = RemoveItem(this);
    cloned.title = "Elimina parola chiave";
    cloned.getElementsByTagName("img")[0].src= "img/meno.gif";
    cloned.getElementsByTagName("img")[0].alt= "Meno";
    this.parentNode.parentNode.appendChild(cloned);
}
</script>
...
...
<ol>
   <li>
        <input name="TxtKeywords" type="text" class="td" size="30"
value=" ... " maxlength="200" />&nbsp;
        <a href="#" onclick="AddItem(this);" title="Aggiungi parola
chiave"><img style="border:0;" src="img/piu.gif" alt="Pi&ugrave;" /></
a>
</ol>
Eppure non funziona.... va tutto bene eccetto che per quel dannato
indice che continua ad essere "1" in ogni caso.
Anzi, adesso il problema lo dà anche IE6, mentre FireFox continua a
funzionare bene.
Come posso risolvere?!!   :-(((
Non so più che cosa provare...

 stessa lista come posso fare?
Bisognerebbe capire il "perché", non puoi tenerlo. Per quanto ne ho
visto, l'approccio da te usato non è quello più indicato. Se c'è un
motivo che ti obbliga a fare come fai, mi sfugge.
-- 
~ "Viviamo dei vuoti lasciati da qualcun'altro."

 funzionare bene.
Domanda: ma il mio codice del primo post, senza aggiunte, hai provato
a farlo girare su IE? Nel caso, ti funziona o ti da anché lì problemi
di indici? Nel secondo caso, non è da escludere che tu possa avere un
qualche problema a livello d'installazione.
Al più prova a pubblicare una pagina online dove replichi il problema
su IE6/7, e vedo se mi da lo stesso comportamento.
-- 
~ "Io ho fatto questo, dice la mia memoria
Io non posso aver fatto questo, dice il mio orgoglio.
Alla fine, è la memoria ad arrendersi." (Nietzsche)

 Alla fine, è la memoria ad arrendersi." (Nietzsche)
Bella :-)