JavaScript对列表节点的操作：删除指定节点、删除最后一个节点、删除第一个节点、删除所有节点、增加节点...

最新推荐文章于 2024-08-16 12:22:46 发布

weixin_30627341

最新推荐文章于 2024-08-16 12:22:46 发布

阅读量1.1k

点赞数

文章标签： javascript 数据结构与算法 java ViewUI

原文链接：http://www.cnblogs.com/shengulong/p/8980297.html

版权

使用菜鸟的运行环境直接测试：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" οnclick="removeFirstNode()">删除第一个节点</button>
<button type="button" οnclick="removeLastNode()">删除最后一个节点</button>
<button type="button" οnclick="addChild()">增加节点</button>
<button type="button" οnclick="clearAll()">清除节点</button>    
    
<ul id="list"> 

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

    <li οnclick="removeElement(this)">Pretty row 2  </li> 
</ul> 

</body>
</html>