0
在這裏，我創建了披薩菜單，一次，你按prep pizza按鈕，它顯示您選擇的所有列表。問題是，當我想通過按'ClearOrder'刪除所有的動態元素，但是，它是在單擊按鈕時刪除所有元素，我需要繼續按下按鈕，直到所有的元素被刪除。我如何解決這個問題？我需要刪除所有動態P元素在一次點擊。任何想法？請動態'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
您是否可以將您的代碼簡化爲與問題相關的部分？ – Barmar