在这里，我创建了披萨菜单，只需按prep pizza按钮，它就会显示您选择的所有列表。问题是，当我想通过按“ClearOrder”删除所有动态元素，但是，not删除单击按钮时的所有元素，我需要继续按下按钮，直到删除所有元素。我怎么能解决这个问题？我需要在单击时删除所有动态P元素。任何的想法？请
<html>
<head>
<title>Pizza</title>
<script type="text/javascript">
function prepza() {
var checkboxes = document.forms["pizzaform"].toppingcheck.length;
var crusttype = document.forms["pizzaform"].crust;
var size = document.forms["pizzaform"].size;
var crustlength = crusttype.length;
var sizelength = crusttype.length;
var newelement = document.createElement("p");
newelement.setAttribute("id", "orderheading");
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode("This pizza will have:"));
for(var c = 0; c < crustlength; c++) {
if(crusttype[c].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "crustelement" + c);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(crusttype[c].value + " Crust"));
}
}
for(var s = 0; s < sizelength; s++) {
if(size[s].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "sizeelement" + s);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(size[s].value + "Size"));
}
}
for(var i = 0; i < checkboxes; i++) {
if(document.forms["pizzaform"].toppingcheck[i].checked) {
var newelement = document.createElement("p");
newelement.setAttribute("id", "newelement" + i);
document.body.appendChild(newelement);
newelement.appendChild(document.createTextNode(document.forms["pizzaform"].toppingcheck[i].value));
}
}
}
function clearchk() {
var f = document.forms[0];
for(i = 0; i < f.elements.length; i++) {
if(f[i].type == "checkbox") {
f[i].checked = false;
}
}
var elements = document.body.getElementsByTagName("p").length;
for(i = 0; i <= elements; i++) {
if(i >= 2) {
document.body.removeChild(document.body.getElementsByTagName("p")[i]);
}
}
}
function flip(pizzatype) {
if(pizzatype == "veggiespecial") {
document.getElementById("peppers").checked = "true";
document.getElementById("onions").checked = "true";
document.getElementById("mushrooms").checked = "true";
} else if(pizzatype == "meatspecial") {
document.getElementById("sausage").checked = "true";
document.getElementById("pepperoni").checked = "true";
document.getElementById("ham").checked = "true";
} else if(pizzatype == "hawaiian") {
document.getElementById("ham").checked = "true";
document.getElementById("pineapple").checked = "true";
}
}
</script>
</head>
<body>
<form id="pizzaform" action="#">
<p>
<input type="button" id="veggiespecial" name="veggiespecial" value="Veggie Special" />
<input type="button" id="meatspecial" name="meatspecial" value="Meat Special" />
<input type="button" id="hawaiian" name="hawaiian" value="Hawaiian" />
</p>
<table>
<tr>
<td>Toppings</td>
<td>Crust</td>
<td>Size</td>
</tr>
<tr>
<td>
<input type="checkbox" id="sausage" value="Sausage" name="toppingcheck" />Sausage</td>
<td>
<input type="radio" name="crust" value="Regular" checked="checked" id="radio1" />Regular</td>
<td>
<input type="radio" name="size" value="Small" checked="checked" id="radiosize1" />Small</td>
</tr>
<tr>
<td>
<input type="checkbox" id="pepperoni" value="Pepperoni" name="toppingcheck" />Pepperoni</td>
<td>
<input type="radio" name="crust" value="Deep Dish" id="radio2" />Deep Dish</td>
<td>
<input type="radio" name="size" value="Medium" id="radiosize2" />Medium</td>
</tr>
<tr>
<td>
<input type="checkbox" id="ham" value="Ham" name="toppingcheck" />Ham</td>
<td>
<input type="radio" name="crust" value="Thin" id="radio3" />Thin</td>
<td>
<input type="radio" name="size" value="Large" id="radiosize3" />Large</td>
</tr>
<tr>
<td>
<input type="checkbox" id="peppers" value="Green Peppers" name="toppingcheck" />Green Peppers</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" id="mushrooms" value="Mushrooms" name="toppingcheck" />Mushrooms</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" id="onions" value="Onions" name="toppingcheck" />Onions</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" id="pineapple" value="Pineapple" name="toppingcheck" />Pineapple</td>
<td></td>
<td></td>
</tr>
</table>
<p>
<input type="button" id="prepBtn" name="prepBtn" value="Prep Pizza" onclick="prepza();" />
<input type="button" onclick="clearchk()" value="ClearOrder" />
</p>
</form>
<script type="text/javascript">
var veggieBtn = document.getElementById("veggiespecial");
veggieBtn.onclick = function () {
flip("veggiespecial");
};
var meatBtn = document.getElementById("meatspecial");
meatBtn.onclick = function () {
flip("meatspecial");
};
var hawaiiBtn = document.getElementById("hawaiian");
hawaiiBtn.onclick = function () {
flip("hawaiian");
};
</script>
</body>
</html>
答案 0 :(得分：2)
问题在于您正在修改DOM并在同一循环中对其进行索引。删除P后，曾经位于索引1的那个向下移动到0。所以你要跳过所有其他元素。你应该获得一次元素列表并迭代它：
var pars = document.body.querySelectorAll("p");
var elements = pars.length;
for(i = 2; i < elements; i++) {
document.body.removeChild(pars[i]);
}
此外，if(i >= 2)测试是不必要的 - 只需在i = 2开始循环。没有规则迭代必须从0开始。
循环的结束测试应该是i < elements，而不是i <= elements。当数组包含N个元素时，最后一个元素的索引为N-1。