javascript--删除dom(代码片段)

Z&&Y Z&&Y     2022-12-06     631

关键词:

1. 删除DOM

删除一个DOM节点就比插入要容易得多。插入DOM

要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的 removeChild 把自己删掉:

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

删除Java:

    // 拿到待删除节点: 删除Java
    let self = document.getElementById('java');
    // 拿到父节点:
    let parent = self.parentElement;
    // 删除:
    let removed = parent.removeChild(self);
    alert(removed === self) // true 

在这里插入图片描述

例如,对于如下HTML结构:

<!-- HTML结构 -->
<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

当我们用如下代码删除子节点时:

    let parent = document.getElementById('parent');
    parent.removeChild(parent.children[0]);
    parent.removeChild(parent.children[1]); // <-- 浏览器报错

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

所有删除指定个数的结点的代码应该为:

<!-- HTML结构 -->
<div id="parent">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

删除1,2,3结点(删除连续的3个结点,for循环遍历3次删除。)

    let parent = document.getElementById('parent');
    for (let i = 0; i < 3; i++) 
        parent.removeChild(parent.children[0]);
    

在这里插入图片描述



javascript删除和替换dom中的元素(代码片段)

查看详情

javascript--删除dom(代码片段)

1.删除DOM删除一个DOM节点就比插入要容易得多。插入DOM要删除一个节点,首先要获得该节点本身以及它的父节点,然后,调用父节点的removeChild把自己删掉:<!--HTML结构--><divid="list"><pid="jav... 查看详情

javascript(dom对象的操作)(代码片段)

Dom对象的操作核心doucument获得Dom节点更新节点实战演练删除Dom节点插入节点把已有的标签进行插入创建一个新的标签,实现插入在子节点前插入(insertBefore)操作表单获取表单,MD5密码拦截核心浏览器网页就是一个Dom树形结构 ... 查看详情

dom基础操作(代码片段)

...存这个被删除的元素。vardiv=document.body.remove(div);  JavaScript;“复制代码”);“查看纯文本代码”);“返回代码高亮”)这样我们的div变量就 查看详情

jquery对dom节点进行操作(删除节点)(代码片段)

...以后也可以继续使用这些元素。<body><scripttype="text/javascript">//入口函数$(docu 查看详情

javascript:js删除dom节点或div的2种常见方式,附例子和运行效果(代码片段)

js删除dom节点或div的2种常见方式1.删除当前节点<script>functiondel(divId)   document.getElementById(divId).remove();</script>完整代码如下:<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>deldom</tit... 查看详情

javascript:js删除dom节点或div的2种常见方式,附例子和运行效果(代码片段)

js删除dom节点或div的2种常见方式1.删除当前节点<script>functiondel(divId)   document.getElementById(divId).remove();</script>完整代码如下:<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>deldom</tit... 查看详情

javascript走dom(代码片段)

查看详情

javascript遍历dom(代码片段)

查看详情

javascript遍历dom(代码片段)

查看详情

javascript切换类dom(代码片段)

查看详情

javascript图像翻转(dom)(代码片段)

查看详情

javascript元素可见dom(代码片段)

查看详情

javascript包装元素#dom(代码片段)

查看详情

javascript包装元素#dom(代码片段)

查看详情

javascript过滤dom元素(代码片段)

查看详情

javascript之dom操作(下集)(代码片段)

节点操作dom节点操作可以归纳为增删改查,查的操作直接获取该节点,然后在控制台打印,如果有同学不会的话可以看看上集。操作步骤注意事项创建节点(增)1.letxx=document.createElement('div') //新建节点2.父节点... 查看详情

javascript将元素插入dom(代码片段)

查看详情