Dynamic 'P' elements are not getting removed at single button 'Click'

Question

Here, I've created Pizza menu, once, you press prep pizza button, it displays all the lists that you select. The problem is, when i want remove all the dynamic elements by pressing 'ClearOrder', but, it is not removing all the elements at single button click, I need to keep on pressing the button till all the elements removed. How I can Solve this? I need to remove all the dynamic P elements at single click. Any idea? Please

<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>

Fiddle

@silk_route11, jQuery is not solution of everything? Whats wrong with pure vanilla JS? — Satpal, Jun 13 '14 at 06:43
Could you reduce your code to just the part relevant to the question? — Barmar, Jun 13 '14 at 06:46
please check this question http://stackoverflow.com/questions/9106329/implementing-jquerys-live-binder-with-native-javascript — silk_route11, Jun 13 '14 at 06:46
@Satpal—a big slab of code is a big slab of code, no mater where you post it. If you reduce your code to the minimum that displays the issue, it's very much easier to deal with. And 90% of the time it will lead you to a fix before you post. — RobG, Jun 13 '14 at 07:07
@RobG, What I have to do code? Yeah A big slab of code thus moved on. OP should have reduced it. — Satpal, Jun 13 '14 at 07:11

Barmar · Accepted Answer · 2014-06-13T07:09:32.647

2

The problem is that you're modifying the DOM and indexing it in the same loop. After you remove a P, the one that used to be at index 1 moves down to 0. So you're skipping every other element. You should get the element list once and iterate through it:

        var pars = document.body.querySelectorAll("p");
        var elements = pars.length;
        for(i = 2; i < elements; i++) {
            document.body.removeChild(pars[i]);
        }

Also, the if(i >= 2) test is unnecessary -- just start the loop at i = 2. There's no rule that iteration has to start at 0.

The end test of the loop should be i < elements, not i <= elements. When an array has N elements, the index of the last one is N-1.

DEMO

edited Jun 13 '14 at 07:09

answered Jun 13 '14 at 06:51

Barmar

741,623
53
500
612

@Barmer: Still, it is working as the old one, It is not doing what i am expecting. I've changed the code as you suggested. I need this 'ClearOrder' button should remove all the paras at a single click. – Sakthivel Jun 13 '14 at 07:03
The OP can also iterate backwards through the collection, or make the collection static by converting to an array first. – RobG Jun 13 '14 at 07:09
`getElementByTagName` returns a _live_ NodeList, so it also updates as the DOM changes. I've changed my answer to use `querySelectorAll`, which returns a static NodeList. – Barmar Jun 13 '14 at 07:10

Dynamic 'P' elements are not getting removed at single button 'Click'

1 Answers1