Was passiert ist, dass das Formular gesendet wird und die Seite (mit ihrem ursprünglichen Inhalt) aktualisiert wird. Sie behandeln das clickEreignis über eine Senden-Schaltfläche.
Wenn Sie das Element entfernen und das Formular nicht senden möchten , behandeln Sie submitstattdessen das Ereignis im Formular und kehren Sie falsevon Ihrem Handler zurück:
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;
}
Aber Sie brauchen (oder wollen) dafür überhaupt kein Formular, nicht wenn der einzige Zweck darin besteht, das Dummy-Div zu entfernen. Stattdessen:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Diese Art der Einrichtung von Ereignishandlern ist jedoch altmodisch. Sie scheinen einen guten Instinkt dafür zu haben, dass sich Ihr JavaScript-Code in einer eigenen Datei befindet und so weiter. Der nächste Schritt besteht darin, weiter zu gehen und die Verwendung von onXYZAttributen zum Anschließen von Ereignishandlern zu vermeiden . Stattdessen können Sie sie in Ihrem JavaScript mit der neueren Methode (ca. 2000) verbinden:
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;
}
}
... rufen Sie dann pageInit();von einem scriptTag ganz am Ende Ihrer Seite body(kurz vor dem schließenden </body>Tag) oder aus dem window loadEreignis heraus auf, obwohl dies sehr spät im Ladezyklus der Seite geschieht und daher normalerweise nicht zum Anschließen eines Ereignisses geeignet ist Handler (dies geschieht zum Beispiel, nachdem alle Bilder endgültig geladen wurden).
Beachten Sie, dass ich einige Handhabungen vornehmen musste, um mit Browserunterschieden umzugehen. Sie möchten wahrscheinlich eine Funktion zum Anschließen von Ereignissen, damit Sie diese Logik nicht jedes Mal wiederholen müssen. Oder verwenden Sie eine Bibliothek wie jQuery , Prototype , YUI , Closure oder eine von mehreren anderen , um diese Browserunterschiede für Sie auszugleichen. Es ist sehr wichtig , die zugrunde liegenden Dinge zu verstehen, sowohl in Bezug auf JavaScript-Grundlagen als auch in Bezug auf DOM-Grundlagen, aber Bibliotheken haben mit vielen Inkonsistenzen zu tun und bieten auch viele nützliche Dienstprogramme - wie ein Mittel zum Anschließen von Event-Handlern, die sich damit befassen Browserunterschiede. Die meisten von ihnen bieten auch die Möglichkeit, eine Funktion einzurichten (zpageInit) ausgeführt werden, sobald das DOM manipulationsbereit ist, lange bevor es window loadausgelöst wird.