Question

我是Javascript的新手，所以欢迎任何和所有输入。我在创建用于删除所选复选框的函数时遇到问题。我尝试了很多东西，但最终只是删除了整个功能。

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

Answer 1

您希望将它们作为父包装器的子项删除。

然后你可以用这个： https://developer.mozilla.org/En/DOM/Node.removeChild

在将子项传递给方法

时删除子项

function deleteCheckbox(cbId){
  document.getElementById("content").removeChild(document.getElementById(cbId));
}

并在你的HTML中

<checkbox onclick="deleteCheckbox(id)">

假设你知道它的ID。如果不这样做，您可以根据订单访问它。我并不完全清楚你希望删除哪个复选框，但它的完成方式与添加孩子时的方式相同，只是相反：）

Answer 2

通用removeElement函数可能是：

function removeElement(element) {
  if (element && element.parentNode) {
    element.parentNode.removeChild(element);
  }
}

// Use example
removeElement(document.getElementById('someId'));

Answer 3

输入html（添加名称标签）

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

添加（在addIt（）中添加名称到复选框）

 chkBox.type="checkbox";                                 

 chkBox.name = 'food';

现在删除功能

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

删除Javascript中的复选框

3 个答案: