使用 event.target 移除 element
"想要按個按鈕後,移除按鈕那一行的東西。"
這麼樣的一個簡單的東西搞了我兩個小時,囧。
<table id="a"> <tr id="b"> <td><input type="text" value="1"/></td> <td id="c"><input id="b" type="button" onclick="remove_check(event)" value="remove"/></td> </tr> <td><input type="text" value="2"/></td> <td id="c"><input id="b" type="button" onclick="remove_check(event)" value="remove"/></td> </tr> </table>
這個 remove_check 很不幸的,要靠著一個 event 來找出該刪除的節點
var remover = $(target).parent().parent(); remover.empty();
但是,不幸的地方就在這只能在 FireFox 上執行…,拿到 IE 上只會看到該走的不走。
這個問題呢,如果拿去 google 問 "jquery empty" 只會找到一堆用 id 來示範如何使用 empty 這個功能。
好在瞎矇到這篇的 comment,問題的源頭原來是 event 在搞鬼。
改成這樣就能動作了。感謝 google QQ。
// IE doesn't pass event into the parameter if ( !event ) { event = window.event; } // IE doesn't have the property "target". // Use "srcElement" instead. // Not 100% the same, but works in most simple cases var target = event.target ? event.target : event.srcElement; var remover = $(target).parent().parent(); remover.empty();
但是途中有看到很多人在警告,這種依靠結構關係的做法不太好,因為 DOM 的結構會因為 browser 的不同而有不同的建構方法,最好還是使用 id 或其他的方式,才能跨 browser。
page revision: 3, last edited: 31 Jan 2011 13:11