Điều đang xảy ra là biểu mẫu đang được gửi đi, và vì vậy trang đang được làm mới (với nội dung ban đầu). Bạn đang xử lý clicksự kiện trên nút gửi.
Nếu bạn muốn xóa phần tử và không gửi biểu mẫu, hãy xử lý submitsự kiện trên biểu mẫu và trả về falsetừ trình xử lý của bạn:
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;
}
Nhưng bạn không cần (hoặc muốn) một biểu mẫu cho điều đó, không phải nếu mục đích duy nhất của nó là xóa div giả. Thay thế:
HTML:
<input type="button" value="Remove DUMMY" onclick="removeDummy()" />
JavaScript:
function removeDummy() {
var elem = document.getElementById('dummy');
elem.parentNode.removeChild(elem);
return false;
}
Tuy nhiên , phong cách thiết lập trình xử lý sự kiện đó đã lỗi thời. Dường như bạn có bản năng tốt khi mã JavaScript của bạn nằm trong tệp của chính nó và như vậy. Bước tiếp theo là tiến xa hơn và tránh sử dụng onXYZcác thuộc tính để kết nối các trình xử lý sự kiện. Thay vào đó, trong JavaScript của bạn, bạn có thể kết nối chúng với cách mới hơn (khoảng năm 2000):
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;
}
}
... sau đó gọi pageInit();từ một scriptthẻ ở cuối trang của bạn body(ngay trước </body>thẻ đóng ) hoặc từ trongwindow load sự kiện, mặc dù điều đó xảy ra rất muộn trong chu kỳ tải trang và do đó thường không tốt cho việc kết nối sự kiện trình xử lý ( ví dụ: nó xảy ra sau khi tất cả các hình ảnh cuối cùng đã được tải).
Lưu ý rằng tôi đã phải thực hiện một số xử lý để đối phó với sự khác biệt của trình duyệt. Có thể bạn sẽ muốn một hàm để kết nối các sự kiện để bạn không phải lặp lại logic đó mỗi lần. Hoặc xem xét sử dụng một thư viện như jQuery , Prototype , YUI , Closure hoặc bất kỳ nào khác để giải quyết những khác biệt của trình duyệt cho bạn. Điều rất quan trọng là phải hiểu những thứ cơ bản đang diễn ra, cả về nguyên tắc cơ bản JavaScript và nguyên tắc cơ bản về DOM, nhưng các thư viện xử lý rất nhiều điểm mâu thuẫn và cũng cung cấp rất nhiều tiện ích hữu ích - như một phương tiện kết nối các trình xử lý sự kiện để xử lý sự khác biệt của trình duyệt. Hầu hết chúng cũng cung cấp cách thiết lập một hàm (như ) để chạy ngay khi DOM sẵn sàng được thao tác, rất lâu trước khi kích hoạt.pageInitwindow load