很常在網路上看到某些表格或清單的選項(ex:plurk的回應),按一下旁邊的X不需要重新整理網頁就可以直接讓該列消失

<table>
	<tr>
		<td></td>
		<td></td>
		<td><a classs="del">刪除</a></td>
	</tr>
</table>

如上面所示,我要按下"刪除"就讓這列消失

//觸發a的click事件後執行以下程式碼(這邊就端看開發者使用的是jQuery還是Javascript)
var td = this.parentNode; //a元素的父節點 = td
var tr = td.parentNode; // td元素的父節點 = tr
tr.parentNode.removeChild(tr); //利用tr的父節點刪除tr

PS:若表格中的內容是從資料庫中讀取出來的,刪除時必需配合AJAX刪除資料庫資料

Categories: JavaScript