删除HTML元素

最新推荐文章于 2023-10-18 18:51:24 发布

怪人友cj

最新推荐文章于 2023-10-18 18:51:24 发布

阅读量2k

点赞数

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44642803/article/details/104238284

版权

JavaScript基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

删除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>

在这里插入图片描述

怪人友cj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
删除HTML元素

删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可用通用方法来删除节点，而列表框、下拉菜单、表格则有额外的方法来删除HTML元素。删除节点删除节点通常借助于其父节点，Node 对象提供了如下方法来删除子节点。➢removeChild(oldNode): 删除oldNode子节点。在从父节点中删除该子节点后，该子节点代表的内容也会消失。下面的代码通过控制HTML增加、删...
复制链接

扫一扫