删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可用通用方法来删除节点，而列表框、下拉菜单、表格则有额外的方法来删除HTML元素。
删除节点
删除节点通常借助于其父节点，Node 对象提供了如下方法来删除子节点。
➢removeChild(oldNode): 删除oldNode子节点。
在从父节点中删除该子节点后，该子节点代表的内容也会消失。下 面的代码通过控制
HTML增加、删除节点来使页面中的表格出现、隐藏。
<body id="test"><input type="button" value="增加" id="add" disabled onclick="add();"><input type="button" value="删除" id="del" disabled onclick="del();"><div id="target" style="width: 240px;height: 50px;border: 1px solid black;">被控制的目标元素</div><script>//获取body元素var body = document.getElementById('test');//获取被控制的目标元素var target = document.getElementById('target');var add = function(){body.appendChild(target);document.getElementById("add").disabled = "disabled";document.getElementById("del").disabled = "";}var del = function(){body.removeChild(target);document.getElementById("del").disabled = "disabled";document.getElementById("add").disabled = "";}</script>
</body>
删除列表框、下拉菜单的选项
<body><input type="text" id="opValue"><input type="button" value="增加" id="add" onclick="add();"><input type="button" value="删除" id="del" onclick="del();"><select name="" id="show" size="8" style="width: 180px;"></select><script>var show = document.getElementById("show");var add = function(){var op = new Option(document.getElementById('opValue').value);show.options[show.options.length] = op;}var del = function(){if(show.options.length>0){show.remove(show.options.length-1);}}</script>
</body>
除此之外，直接将指定选项赋为null也可删除该选项，因此可以将上面程序中的del()函数改为如下形式。
val del = function(){if (show.options.length > 0){show.options[show.options.length - 1] = null;}
}
删除表格的行或单元格
删除表格的指定表格行使用HTMLTableElement对象的如下方法。
➢deleteRow(long index):删除表格中index索引处的行。
删除表格行的指定单元格使用HTMLRowElement对象的如下方法。
➢deleteCell(long index):删除某行index 索引处的单元格。
下面的代码可以动态删除页面中的表格行，也可以动态删除表格中的单元格。
<body><input type="button" value="删除最后一行" id="delrow" onclick="delrow();"><br><input type="button" value="删除最后一行的最后一格" onclick="delcell();"><br><table id="test" border="1" style="width: 500px;"><caption>标题</caption><tr><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr><tr><td>31</td><td>32</td></tr></table><script>var tab = document.getElementById("test");var delrow = function(){if(tab.rows.length>0){tab.deleteRow(tab.rows.length-1);}}var delcell = function(){var rowList = tab.rows;var lastRow = rowList.item(rowList.length-1);if(lastRow.cells.length>0){lastRow.deleteCell(lastRow.cells.length-1);}}</script>
</body>
