马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 小黄练编程 于 2022-3-31 19:57 编辑 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul li{
position:relative;
background-color:red;
height:40px;
}
button{
position:absolute;
top:0;
right:0;
display:inline-block;
/* width:100px; */
}
</style>
</head>
<body>
<textarea id='text'>请在此留言</textarea>
<input id='ipt' type='button' value='发布留言'>
<ul>
<li>你好！<button>删除</button></li>
<li>你好！<button>删除</button></li>
<li>美好的一天<button>删除</button></li>
</ul>
<script>
var text=document.querySelector('#text');
var ipt=document.querySelector('#ipt');
var ul=document.querySelector('ul');
text.onfocus=function(){
if(this.value=='请在此留言'){
this.value='';
}
}
text.onblur=function(){
if(this.value==''){
this.value='请在此留言';
}
}
ipt.onclick=function(){
//创建好一个新节点
var lili=document.createElement('li');
if(text.value!==''){
lili.innerHTML=text.value;
//将创建好的新节点添加到ul的第一个子元素前面。
ul.insertBefore(lili, ul.children[0]);
//执行完前面的操作后将textarea的value值改为'';
text.value='';
}
}
//给li里的按钮绑定删除事件
var lis=ul.children;
var deleat=lis[0].children[0];//这里不可以写成lis，因为lis代表一个数组。
var deleat=[];
for(var i=0;i<lis.length;i++){
deleat[i]=lis[i].children[0];
lis[i].setAttribute('index',i);
deleat[i].onclick=function(){
//那个按钮点击，删除相应的li,即ul里的第几个元素。
ul.removeChild(ul,children[lis[i].index]);
}
}
</script>
</body>
</html>
不知道你要实现什么，前面回复你了闭包中无法直接传i进去，你偏偏还是要这么传个i进去。
用的的代码修改处，自已参考。 //给li里的按钮绑定删除事件
var lis=ul.children;
for(var i=0;i<lis.length;i++){
var deleat=lis[i].children[0];
lis[i].setAttribute('index',i); // 给li添加属性index
deleat.onclick=function(){
j = this.parentNode.getAttribute('index'); // 获取li属性index的值
lis[j].removeChild(lis[j].children[0]);
}
}
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-3-31 18:30:18
置顶卡
千斤顶
显身卡
发表于 2022-3-31 18:33:28
楼主
