使用 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。

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License