如何删除节点

移除指定元素方法

empty()方法

  • 清空元素中的所有后代节点
  • 不能删除自己本身这个节点

remove()方法

  • 该节点与该节点所包含的所有后代节点将同时被删除
  • 提供传递一个筛选的表达式,删除指定合集中的元素

由于要删除节点,因此我选用 remove() 方法


代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>remove element</title>
</head>
<body>
<ul>  
  <li><div id="0"></div>hhh0<div class="delete">delete</div></li>
  <li><div id="1"></div>hhh1<div class="delete">delete</div></li>
  <li><div id="2"></div>hhh2<div class="delete">delete</div></li>
  <li><div id="3"></div>hhh3<div class="delete">delete</div></li>
  <li><div id="4"></div>hhh4<div class="delete">delete</div></li>
  <li><div id="5"></div>hhh5<div class="delete">delete</div></li>
</ul>
<script>
  var hhh = document.getElementsByClassName('delete');
  var hlis;
  for(let i=0;i<hhh.length;i++){
    hhh[i].addEventListener('click',function(){
      hlis = i+"";
      document.getElementById(hlis).parentNode.remove();  

    });
  }
</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 631评论 0 1
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,049评论 0 9
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 844评论 0 8
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,489评论 0 44
  • 作为一个每天兢兢业业遛狗铲屎的资深铲屎官,相信你也一定经常被人问到这些问题: “狗有啥好,你咋这么喜欢狗嘞?”“这...
    抹香火烈鸟阅读 1,744评论 9 22