Newsgroup: it.comp.lang.javascript
Titolo: rimuovere <div> tramite pulsante

<div>
    div1
 
    <div>
  	div2
 
         <button onclick="parent.removeChild(self);">chiudi</button>
     </div>
</div>
 
Premendo 'chiudi' il 'div2' dovrebbe essere rimosso dal DOM, ma non 
funziona...


Debugga:
 
<button onclick="console.log(this);">chiudi</button>
 
Ti accorgerai che this non e` il div, ma il button, quindi il tuo button 
dovrebbe essere qualcosa tipo
 
onlick="this.parent.parent.removeChild(this.parent);"
 
Vado a naso. Di solito uso jQuery per queste cose :D
 
Bye.

 funziona...
 
Come si dice spesso nel NG, "non funziona" non vuol dire niente: si
hanno sempre risultati, solo magari non sono quelli che uno si aspetta.
Ricorda di aprire sempre la console degli errori del browser, in modo da
capire cos'è che è andato storto: anche se "visivamente" non sembra
succedere niente, spesso si hanno messaggi di errore da parte nel
browser nella suddetta console. Nel tuo caso, avresti dovuto vedere
qualcosa tipo "parent.removeChild non è una funzione" o similare. A quel
punto, debuggando avresti visto che "parent" non è un nodo ma un oggetto
Window.
 
Se il tuo scopo fosse stato rimuovere "div2", il codice sarebbe dovuto
essere il seguente:
 
    <button
onclick="this.parentNode.parentNode.removeChild(this.parentNode)">chiudi</button>
 
Dentro un attributo mappato su un event handler, `this` è l'elemento
stesso (nel tuo caso "button"), quindi "div2" è il parente di "button"
(this.parentNode), e se vuoi rimuovere "div2" devi usare il suo, di
parente (this.parentNode.parentNode).
 
Una nota a margine: non si usa più specificare gli eventi sul tag, va
bene per piccole cose o esempi sul NG, ma solitamente si tende ad avere
una netta separazione fra markup language e codice di comportamento
(JavaScript). Lo dico solo perché magari, visto che sei agli inizi, hai
trovato esempi vecchi o fuorvianti che ne fanno uso.


 
Dentro al gestore di eventi usi "this" per riferirti all'elemento di cui 
stai gestendo il click e "parentNode" per riferirti al genitore di un nodo.
 
Per cui:
 
   this.parentNode.parentNode.removeChild(this.parentNode)
 
 

 trovato esempi vecchi o fuorvianti che ne fanno uso.
 
ok, ma vale la pena creare un file js solo per scrivere
"this.parentNode.parentNode.removeChild(this.parentNode)" ?
Forse non ho capito quello che volevi dire...

    this.parentNode.parentNode.removeChild(this.parentNode)
 
perfetto, grazie

 "this.parentNode.parentNode.removeChild(this.parentNode)" ?
 
No, non intendevo dire di creare un file separato, anche se è una
pratica che consiglio ugualmente. Ovviamente, dipende dalla mole di
codice JS. Se fosse davvero SOLO quella riga lì in tutta la pagina (cosa
che normalmente non accade), sicuramente non varrebbe la pena creare un
file esterno in quanto un ulteriore chiamata HTTP non sarebbe giustificata.
 
Quello che però intendevo io, era di non mettere gli eventi (e la
logica) del codice JavaScript in mezzo a codice HTML. Insomma, avere
qualcosa tipo:
 
<html>
    <head>
        <script>
            function removeParent() {
                this.parentNode.parentNode.removeChild(this.parentNode);
            }
 
            window.onload = function main () {
                var btn = document.getElementById("btn-remove");
 
                btn.onclick = removeParent;
            }
        </script>
    </head>
 
    <body>
        <div>
            Parent
            <button id = "btn-remove">Chiudi</button>
        </div>
    </body>
</html>
 
Il codice è un po' semplificato, in base ai browser che usi sarebbe più
opportuno usare `addEventListener` ad esempio per associare gli eventi
(purtroppo le vecchie versioni di IE non lo supportano, quindi dipende
per quali browser stai scrivendo il tuo codice).
 
Ovviamente più il codice JS crescerà, più ti converrà esportarlo in un
file esterno. Tra l'altro in questo caso ti diventerà semplicissimo. Non
solo, se un giorno vorrai cambiare la logica che "chiude" il DIV (ad
esempio lo nasconde) non dovrai toccare il codice HTML ma solo quello
JavaScript. È il motivo per cui è preferibile fare la separazione tra
Contenuto, Comportamento, e Aspetto (rispettivamente HTML, JavaScript, e
CSS) e cercare di "mischiarli" il meno possibile tra di loro.
 
Nota che il riferimento al pulsante l'ho preso tramite `getElementById`,
ma come abbiamo già discusso qualsiasi altro metodo che ti restituisse
il riferimento a un nodo HTML sarebbe andato bene. Ad esempio, puoi
tranquillamente riciclare lo stesso codice per nodi che crei al volo:
 
    var div = document.createElement("div");
 
    document.body.appendChild(div);
 
    var btn = document.createElement("button");
 
    div.appendChild(btn);
 
    btn.onclick = removeParent;
 
Come vedi la riga che associa l'evento è esattamente la stessa, sia che
esista già che sia appena stato creato.