Quello che sta succedendo è che il modulo viene inviato e quindi la pagina viene aggiornata (con il suo contenuto originale). Stai gestendo l' clickevento su un pulsante di invio.
Se desideri rimuovere l'elemento e non inviare il modulo, gestisci invece l' submitevento sul modulo e torna falsedal tuo gestore:
HTML:
<form onsubmit="return removeDummy(); ">
<input type="submit" value="Remove DUMMY"/>
</form>
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Ma non hai affatto bisogno (o vuoi) un modulo per questo, non se il suo unico scopo è rimuovere il div fittizio. Anziché:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Tuttavia , quello stile di impostazione dei gestori di eventi è antiquato. Sembra che tu abbia un buon istinto in quanto il tuo codice JavaScript è nel suo file e così via. Il passaggio successivo è quello di andare oltre ed evitare di utilizzare gli onXYZattributi per collegare i gestori di eventi. Invece, nel tuo JavaScript, puoi collegarli con il modo più recente (circa anno 2000) invece:
HTML:
<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
function pageInit() {
// Hook up the "remove dummy" button
var btn = document.getElementById('btnRemoveDummy');
if (btn.addEventListener) {
// DOM2 standard
btn.addEventListener('click', removeDummy, false);
}
else if (btn.attachEvent) {
// IE (IE9 finally supports the above, though)
btn.attachEvent('onclick', removeDummy);
}
else {
// Really old or non-standard browser, try DOM0
btn.onclick = removeDummy;
}
}
... quindi chiama pageInit();da un scripttag alla fine della tua pagina body(appena prima del </body>tag di chiusura ), o dall'interno window loaddell'evento, anche se ciò accade molto tardi nel ciclo di caricamento della pagina e quindi di solito non va bene per collegare l'evento gestori (succede dopo tutte le immagini sono state finalmente caricate, per esempio).
Si noti che ho dovuto gestire alcune operazioni per gestire le differenze del browser. Probabilmente vorrai una funzione per collegare gli eventi in modo da non dover ripetere quella logica ogni volta. Oppure considera l'utilizzo di una libreria come jQuery , Prototype , YUI , Closure o una qualsiasi delle tante altre per appianare quelle differenze del browser per te. È molto importante capire le cose sottostanti in corso, sia in termini di fondamenti di JavaScript che di fondamenti di DOM, ma le librerie gestiscono molte incoerenze e forniscono anche molte utili utilità, come un mezzo per collegare gestori di eventi che si occupano di differenze del browser. La maggior parte di essi fornisce anche un modo per impostare una funzione (comepageInit) per essere eseguito non appena il DOM è pronto per essere manipolato, molto prima degli window loadincendi.