<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var li_arr=document.getElementsByTagName("li");
for(var i=0;i<li_arr.length;i++){
var input_arr=li_arr[i].getElementsByTagName("input");
input_arr[0].onclick=function(){//删除前一个li节点
var li=this.parentNode;
var br=li.previousSibling;//获取li前面的换行
br.parentNode.removeChild(br);//删除换行标签
pre_li=li.previousSibling;//获取前一个li
pre_li.parentNode.removeChild(pre_li);
}
//删除当前节点
input_arr[1].onclick=function(){
var li=this.parentNode;
li.parentNode.removeChild(li);
}
//删除后一个li节点
input_arr[2].onclick=function(){
var li=this.parentNode;
var br=li.nextSibling;//获取到换行标签
br.parentNode.removeChild(br);
var next_li=li.nextSibling;//获取后一个li
next_li.parentNode.removeChild(next_li);
}
}
}
</script>
</head>
<body>
<div id="container">
<ul>
<li>1111<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>2222<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>3333<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>4444<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>5555<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>6666<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>7777<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
<li>8888<input type="button" value="删除前一个"/><input type="button" value="删除当前"/><input type="button" value="删除后一个"/></li>
</ul>
</div>
</body>
</html>
Element对象,通过点击按钮删除前一个,后一个以及当前节点,主要用到:parentNode,previousSibling,nextSibling,removeChild()等
最新推荐文章于 2024-01-01 09:55:58 发布