使用菜鸟的运行环境直接测试：http://www.runoob.com/try/try.php?filename=tryjs_events

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script>

function removeFirstNode(){

    var node = document.getElementsByTagName("li");

    document.getElementById("list").removeChild(node[0]);

}

function removeLastNode(){

    var node = document.getElementsByTagName("li");

    document.getElementById("list").removeChild(node[node.length-1]);

}

function addChild(){

    var node = document.createElement('li');

    node.setAttribute("onclick", "removeElement(this)");

    var content = document.getElementById('content').value;

    var textnode = document.createTextNode(content);

    node.appendChild(textnode)

    document.getElementById('list').appendChild(node);

}

function clearAll(){

    document.getElementById("list").innerHTML='';

}

function removeElement(_element){

 var _parentElement = _element.parentNode;

 if(_parentElement){

  _parentElement.removeChild(_element);

 }

}

</script>

</head>

<body>

<input id="content" placeholder="节点内容" value="" />

<button type="button" onclick="removeFirstNode()">删除第一个节点</button>

<button type="button" onclick="removeLastNode()">删除最后一个节点</button>

<button type="button" onclick="addChild()">增加节点</button>

<button type="button" onclick="clearAll()">清除节点</button>    

<ul id="list"> 

    <li onclick="removeElement(this)">Pretty row 1  </li> 

    <li onclick="removeElement(this)">Pretty row 2  </li>

</ul> 

</body>

</html>

JavaScript对列表节点的操作：删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点的更多相关文章

  1. Python中列表的常用操作

    只整理重要常用的操作: append():尾部追加元素,参数只能为一个. extend():用列表扩展列表,参数为列表. insert():在指定位置插入元素,第一个参数为插入位置,第二个为参数为插入 ...

  2. Java中删除指定文件夹文件夹下面有内容也删除使用递归方案

    import java.io.File; import java.text.ParseException; import java.text.SimpleDateFormat; import java ...

  3. Inno如何在安装完成时删除指定的文件夹(下的所有文件及子目录)??

    删除安装目录下的任意文件夹及下的所有文件及子目录,或者删除指定目录的文件夹,要如何做到呢?谢谢!! //删除文件    用 DeleteFile 只能删除一个文件,不能使用通配符来删除多个文件Dele ...

  4. mysql 删除指定字符

    mysql 删除指定字符 1.1 前言        实际需求中如果想删除指定的字符,一般需要使用到trim函数.trim函数默认删除字符的前后空格,如果想指定删除特定字符,则需要使用一下语句进行声明 ...

  5. pandas学习笔记之删除指定列

    删除指定 def df["列名"] del df4["韩国地震影响"] 直接删除,df4中不在含有"韩国地震影响"这一列了 drop 不改变 ...

  6. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  7. Mongodb 3.6 副本集测试及添加删除节点等操作

    下载tar包并安装curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-3.6.8.tgz [root@mysqlt ...

  8. hbase笔记---新版api之对表的操作，指定region创建，普通创建，删除，修改列族信息

    hbase 对于表的相关操作: 实现功能有:指定region创建,普通创建,删除,修改列族信息 package learm.forclass.testclass; import org.apache. ...

  9. openstack中彻底删除计算节点的操作记录

    在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很 ...

随机推荐

  1. 【贪心】bzoj1572: [Usaco2009 Open]工作安排Job

    先是没怎么理解这个贪心……然后贪心又被细节弄挂…… Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单位时间. ...

  2. vue ssr

    https://mp.weixin.qq.com/s/v1c69bJ5PxGcqt-ZU4FVXw https://juejin.im/entry/590ca74b2f301e006c10465f h ...

  3. python爬虫基础06-常见加密算法

    Python与常见加密方式 前言 数据加密与解密通常是为了保证数据在传输过程中的安全性,自古以来就一直存在,古代主要应用在战争领域,战争中会有很多情报信息要传递,这些重要的信息都会经过加密,在发送到对 ...

  4. js对象,数组,字符串的操作

    循环绑定=>变量污染 for (var i = 0;i<lis.length;i++){ lis[i].index = i;#给页面元素对象添加一个任意属性(保留索引的属性index) # ...

  5. if-else优化

    过多if-else分支的优化   超过3个就应该去优化,说if-else过多的分支可以使用switch或者责任链模式等等方式来优化.确实,这是一个小问题,不过我们还是可以整理一下这个小问题的重构方式. ...

  6. mysql 处理数据库中的重复行

    1.对于主键和唯一索引,可以用IGNORE关键字,遇到重复记录会直接忽略插入记录,返回0.insert ignore into table_name ('id','name') values (1,' ...

  7. 图论trainning-part-2 B. Claw Decomposition

    B. Claw Decomposition Time Limit: 1000ms Memory Limit: 131072KB 64-bit integer IO format: %lld      ...

  8. nginx报错502

    http请求流程:一般情况下,提交动态请求的时候,nginx会直接把 请求转交给php-fpm,而php-fpm再分配php-cgi进程来处理相关的请求,之后再依次返回,最后由nginx把结果反馈给客 ...

  9. BZOJ 1191: [HNOI2006]超级英雄Hero【二分图匹配】

    裸的匹配题,一眼就能看出来二分图的模型,是某个经典题的改编.貌似某本图论书上讲过的,有N个人以及M个职位,每个职位只能提供给一个人,而每个人由于能力有限只能胜任有限个职位,问是否有办法使得每个人都有工 ...

  10. K-lord #1

    Memories 布雷芙,和YYJ就那样在那个初夏相遇了. 她,一头蓬松的长发,简单可爱的短袖. 他,带着那么灿烂阳光的笑容. 于是一切就变得很微妙.眼神有了温度手心有了潮湿. 那些天空里匆忙盛开的夏 ...