Home/ Questions/Q 8014395
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T19:55:10+00:00

Im very new to Javascript so any and all input would be welcomed. I

  • 0

Im very new to Javascript so any and all input would be welcomed.
I am having issues in creating a function used to delete selected checkboxes. I have tried numerous things but end up just deleting the entire function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Shopping List</title>
        <script>
            /*
            Create a shopping list program using javascript.  The page should have a text input, an “add” button, a “delete checked” button, and a list of items.  Each item should have a checkbox next to it.  If you fill out the text input and click” add,” it should add a list item to the end of the list.  If you check a box (or boxes) next to a list item then click “delete checked,” it should remove the list items that were checked.  Style the page using CSS.  
            */
            function addIt() {
                var list = document.getElementById("list"); //used to grab the parent level "list"
                var li = document.createElement("li"); //creates a "li" in the document
                var userTxt = document.getElementById("product"); //used to grab the user text input "product"
                var childText = userTxt.value; //returns the userTxt value and sets it equal to childText
                var childTextNode = document.createTextNode(childText); //creates a textNode in the document based on what the user entered in the "product" text field
                var chkBox = document.createElement("input"); //creates a new input based on the user input
                chkBox.type = "checkbox"; //creates a checkbox next to the user input from "product"

                //form the relationship
                li.appendChild(chkBox); //
                li.appendChild(childTextNode); //
                //attach to the parent element
                list.appendChild(li); //
                inputText.value = "";
                inputText.focus();
            }
        </script>
    </head>

    <body>
        <div id="content">
            <h1>Shopping Cart</h1>
            <input id="product" type="text" />
            <input type="button" id="Add" value="Add" onclick="addIt()" />
            <input type="button" id="Delete" value="Delete" onclick="deleteIt()" />
            <ul id="list">
                <li>
                    <input type="checkbox" />Eggs</li>
            </ul>
        </div>
        </div>
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Input in html (added name tag)

      <ul id="list">
    <li><input type="checkbox" name='food'>Eggs</input></li>
  </ul>

    While adding (in addIt() add name to checkbox)

     chkBox.type="checkbox";                                 

 chkBox.name = 'food';

    Now deleteIt function

    function deleteIt(){
    var food = document.getElementsByName('food'); // get the checkbox
    for (i=0; i<food.length; i++) // loop through it
    {
    // if the current state is checked, unchecked and vice-versa
            if (food[i].checked) // if its checked
            {
            var remElm = food[i];   // element to be removed
        var list=document.getElementById("list"); // also li to be removed           
        food[i].nextSibling.nodeValue = ''; // Text value set to 
        remElm.parentNode.removeChild(remElm);
        ul = document.getElementsByTagName('ul')[0];
        li = ul.getElementsByTagName('li');
        ul.removeChild(li[i]);
            } else {       
            }
    }
}
    • 0