这是一段实现添加或删除列表项的代码，我想问为什么点击“删除”时，如果是新添加的项就只需要点一次，而原本存在的项（也就是其中的"A1"、"A2"、"A3"项）就必须点两次呢？此外，当myUL中已经没有子节点了，再点"删除"按钮却没有执行else里的内容（也就是alert命令），这是为啥？？
求解惑！~
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript</title>
<script type="text/javascript">
function insert() {
var newLi = document.createElement("li");
var text = document.createTextNode(document.getElementById("input1").value);
newLi.appendChild(text);
var temp = document.getElementById("myUL");
temp.appendChild(newLi);
}
function dele() {
var t = document.getElementById("myUL");
if (t.hasChildNodes) {
t.removeChild(t.lastChild);
}
else {
alert("已经没有可删除项!");
}
}
</script>
</head>
<body>
<div style="width:300px; height:300px; overflow:auto;">
<ul id="myUL">
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</div>
添加新的内容：<input id="input1" type="text" />
<input type="button" value="添加新项" onclick="insert()" />
<input type="button" value="删除项目" onclick="dele()" />
</body>
</html>
空白字符也算一个节点，你的a1~a3后由换行，所以需要点击2次。
改成下面的结构
<ul id="myUL"><li>A1</li><li>A2</li><li>A3</li></ul>
，或者代码改成下面的
function dele() {
var t = document.getElementById("myUL");
var li=t.getElementsByTagName('li')
if (li.length>0) {
t.removeChild(li[li.length-1]);
}
else {
alert("已经没有可删除项!");
}
}
T.T 感觉代码没有写错呀
实质上是因为换行以后dom节点会多一个‘空白节点‘ ，而后续增加的代码内部不会添加换行就不会有空白节点了。