这是一段实现添加或删除列表项的代码,我想问为什么点击“删除”时,如果是新添加的项就只需要点一次,而原本存在的项(也就是其中的"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>