老师看看前面对不对，最后删除只能删新建的一个。
我在制作过程中，lis.length+=1就报错，换成len=lis.length; len+=1就过去了，为什么呢？
前面循环for里定义过一次 lis.length 后面for还需要再定义吗,能直接引用吗？直接引用我发现删除后再创建它就按原来的数字增加，应该是上面后下面的length不是一个数字。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
div:not(:nth-of-type(2)) {
width: 500px;
height: 100%;
background-color: #a0e4ff;
margin: 0 auto;
}
/*ul默认有外边距*/
ul {
width: 300px;
height: 100%;
background-color: #ecc7ea;
list-style: none;
/*清除默认边距*/
margin: 0;
padding: 0;
margin: 20px auto;
margin-bottom: 30px;
}
li {
width: 200px;
height: 30px;
line-height: 30px;
margin: 30px auto;
background-color: #cdffc0;
}
</style>
</head>
<body>
<div id="box">
<button id="btnAdd">添加元素</button>
<button id="btnRemove">删除元素</button>
<ul id="list">我是ul
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
</ul>
</div>
<script type="text/javascript">
var but1=document.getElementById("btnAdd");
var but2=document.getElementById("btnRemove");
var lis=document.getElementsByTagName("li");
var ul=document.getElementById("list");
for(var i=0,len=lis.length;i<len;i++){
lis[i].onmouseover=function(){
this.style.backgroundColor="purple"}
lis[i].onmouseout=function(){
this.style.backgroundColor="#FF6633"}
};
but1.onclick=function(){
li=document.createElement("li");
var len=lis.length;
len+=1;
for(var i=0;i<len;i++){
txt=document.createTextNode("我是li"+[(i+1)]);
}li.appendChild(txt);
ul.appendChild(li);
but2.onclick=function(){
ul.removeChild(li)
}
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1.是改成如下会报错吗？这样并没报错，且这样改lis.length+=1没有任何意义，是一句多余的代码。如果不是这样做的，建议详细描述一下。
2.可以使用。因为第一个for循环没有放在事件中，页面打开时，它获取到的长度为3。点击事件执行，只会执行事件中的代码，事件外部的代码是不会执行的，所以len的值一直是3，除非在事件中改变。
3.因为删除的是变量li,每一次点击事件触发时，只会创建一个li，即变量li值永远是最后一个li。所以也只能删除一个li。
综上所述，建议如下修改：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星