Olan şey, formun gönderilmesidir ve bu nedenle sayfa (orijinal içeriğiyle) yenilenmektedir. Sen hallediyoruz clickbir gönder düğmesi üzerine olay.
Eğer eleman kaldırıp istiyorsanız değildir formu göndermek, işlemek submityerine forma olayı ve iade falsesenin işleyicisinden:
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;
}
Ancak bunun için bir forma ihtiyacınız yoktur (veya istemezsiniz), tek amacı kukla div'i kaldırmak değilse. Yerine:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Ancak , olay işleyicileri kurma tarzı eski modadır. JavaScript kodunuzun kendi dosyasında olması konusunda iyi içgüdüleriniz var gibi görünüyor. Sonraki adım, bunu daha ileri götürmek ve onXYZolay işleyicilerini bağlamak için öznitelikleri kullanmaktan kaçınmaktır . Bunun yerine, JavaScript'inizde, bunları daha yeni (yaklaşık 2000 yılı) yolla bağlayabilirsiniz:
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;
}
}
... sonra çağrı pageInit();bir gelen scriptsayfanızın en sonunda etiketi body(sadece kapanış önce </body>etiketi) ya içinden window loadolur da, olayın çok geç sayfa yükleme döngüsünde ve böylece genellikle olayı bağlamak için iyi değil işleyiciler ( örneğin, tüm resimler nihayet yüklendikten sonra gerçekleşir ).
Tarayıcı farklılıklarıyla başa çıkmak için biraz işlem yapmam gerektiğini unutmayın. Muhtemelen olayları birleştirmek için bir işlev isteyeceksiniz, böylece bu mantığı her seferinde tekrarlamanız gerekmez. Veya sizin için bu tarayıcı farklılıklarını düzeltmek için jQuery , Prototype , YUI , Closure veya diğer birkaç kitaplık gibi bir kitaplık kullanmayı düşünün . Bu var çok önemli yatan şeyler JavaScript temelleri ve DOM temelleri açısından hem de devam anlamak için, ancak kütüphaneler tutarsızlıklar bir sürü başa ve aynı zamanda kullanışlı araçlardan bir sürü sağlamak - Olay işleyicileri o kadar çengel aracı gibi fırsatlar ile tarayıcı farklılıkları. Çoğu aynı zamanda bir işlevi ayarlamak için bir yol sağlar (örneğinpageInit) DOM tetiklenmeye hazır olur olmaz, window loadyangınlardan çok önce çalıştırılır .