【发布时间】：2014-08-03 15:35:29
【问题描述】：
在这里，我创建了 Pizza 菜单，一次，您按下 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>
【问题讨论】：
-
可以使用
jQuery吗？ -
@silk_route11，jQuery 不是万能的解决方案吗？纯香草 JS 有什么问题？
-
你能把你的代码减少到与问题相关的部分吗？
-
@Satpal——一大块代码就是一大块代码，不管你把它贴在哪里。如果您将代码减少到显示问题的最低限度，则处理起来会容易得多。 90% 的情况下，它会在您发布之前引导您进行修复。
标签： javascript