Apa yang terjadi adalah formulir tersebut dikirimkan, sehingga halaman disegarkan (dengan konten aslinya). Anda menangani clickacara tersebut dengan tombol kirim.
Jika Anda ingin menghapus elemen dan tidak mengirimkan formulir, tangani submitacara tersebut di formulir, dan kembali falsedari penangan Anda:
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;
}
Tetapi Anda sama sekali tidak membutuhkan (atau menginginkan) formulir untuk itu, tidak jika tujuan utamanya adalah untuk menghapus div dummy. Sebagai gantinya:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Namun , gaya pengaturan penangan acara itu kuno. Anda tampaknya memiliki naluri yang baik bahwa kode JavaScript Anda ada di file sendiri dan semacamnya. Langkah selanjutnya adalah melangkah lebih jauh dan menghindari penggunaan onXYZatribut untuk menghubungkan penangan kejadian. Sebaliknya, dalam JavaScript Anda, Anda dapat menghubungkannya dengan cara yang lebih baru (sekitar tahun 2000) sebagai gantinya:
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;
}
}
... lalu panggil pageInit();dari scripttag di bagian paling akhir laman Anda body(tepat sebelum </body>tag penutup ), atau dari dalam window loadacara, meskipun itu terjadi sangat terlambat dalam siklus pemuatan laman dan biasanya tidak baik untuk menghubungkan acara penangan (itu terjadi setelah semua gambar akhirnya dimuat, misalnya).
Perhatikan bahwa saya harus melakukan beberapa penanganan untuk menangani perbedaan browser. Anda mungkin menginginkan fungsi untuk menghubungkan acara sehingga Anda tidak perlu mengulangi logika itu setiap saat. Atau pertimbangkan untuk menggunakan pustaka seperti jQuery , Prototype , YUI , Closure , atau beberapa lainnya untuk memuluskan perbedaan browser tersebut untuk Anda. Sangat penting untuk memahami hal-hal mendasar yang terjadi, baik dalam hal dasar-dasar JavaScript dan dasar-dasar DOM, tetapi perpustakaan menangani banyak ketidakkonsistenan, dan juga menyediakan banyak utilitas praktis - seperti sarana untuk menghubungkan penangan acara yang berhubungan dengan perbedaan browser. Kebanyakan dari mereka juga menyediakan cara untuk menyiapkan fungsi (sepertipageInit) untuk dijalankan segera setelah DOM siap untuk dimanipulasi, jauh sebelum window loaddiaktifkan.