javascript&；html-如何删除复选框_Javascript_Html_Checkbox

javascript&；html-如何删除复选框

javascript html checkbox

javascript&；html-如何删除复选框,javascript,html,checkbox,Javascript,Html,Checkbox,我基本上只是发布了一个与此任务相关的问题，所以如果它看起来很重复，我很抱歉，但我遇到了另一个问题因此，基本上我正在创建一个程序，允许用户通过添加和删除项目来创建和管理“待办事项列表”。当前，如果用户在文本框中输入内容并单击“添加”按钮，则会创建一个新的复选框。我正在尝试获取它，这样用户也可以通过选中一个复选框并单击移除按钮来移除复选框/项目。我试着写一个程序来实现上述功能，但当我在html浏览器中运行它时，它什么都没做，我也不知道为什么 HTML代码： <html> <

我基本上只是发布了一个与此任务相关的问题，所以如果它看起来很重复，我很抱歉，但我遇到了另一个问题

因此，基本上我正在创建一个程序，允许用户通过添加和删除项目来创建和管理“待办事项列表”。当前，如果用户在文本框中输入内容并单击“添加”按钮，则会创建一个新的复选框。我正在尝试获取它，这样用户也可以通过选中一个复选框并单击移除按钮来移除复选框/项目。我试着写一个程序来实现上述功能，但当我在html浏览器中运行它时，它什么都没做，我也不知道为什么

HTML代码：

<html>
    <head>
        <title>Checklist</title>
    </head>
    <body>
        <div><h1>My to-do list</h1></div><br />
        <div id ="myCheckList">Enter an item:</div>
        <div>Type something: <input type="text" id="textbox"></input></div>
        <input type="button" id="addBut" value = "Add item" onclick="addItem()"/>
        <input type="button" id="removeBut" value =  "Remove items" onclick="removeItem()"/>
        <input type="button" id="toggleBut" value = "Toggle highlight" onclick="toggle()"/>
        <input type="button" id="sortBut" value = "Sort items" onclick="sort()"/>

        <script src="addHandler.js"></script>
        <div id="checklist_items"></div>
    </body>
</html>


清单
我的待办事项清单

输入一个项目：
键入以下内容：

JAVASCRIPT代码：

function addItem() {
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element.innerHTML = '<input type="checkbox"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else {
        alert("You must enter at least 1 character.");
    }
}


function removeItem(){
    if (document.getElementById('checklist_items').checked){
        ("checklist_items").remove();
    }

}

函数addItem（）{
var input=document.getElementById（“文本框”）；
var wrapper=document.getElementById（“检查表项目”）；
if（input.value.trim（）！=“”）{
var new_element=document.createElement（“DIV”）；
new_element.innerHTML=''+input.value；
appendChild（新的_元素）；
}
否则{
警报（“您必须输入至少1个字符。”）；
}
}
函数removietem（）{
if（document.getElementById（'checklist_items'）。选中）{
（“检查表项目”）。删除（）；
}
}

您正在尝试检查父div的checked属性（#checklist_items），而该父div根本没有该属性（checked）

您可以使用来确定检查表项目内所有选中复选框的目标。然后遍历它们以删除当前项的parentNode

函数addItem（）{
var input=document.getElementById（“文本框”）；
var wrapper=document.getElementById（“检查表项目”）；
if（input.value.trim（）！=“”）{
var new_element=document.createElement（“DIV”）；
new_element.innerHTML=''+input.value；
appendChild（新的_元素）；
}
否则{
警报（“您必须输入至少1个字符。”）；
}
}
函数removietem（）{
var list=document.querySelectorAll（“#检查清单_项目输入：选中”）；
list.forEach（函数（chk）{
chk.parentNode.remove（）；
});
}

我的待办事项列表

输入一个项目：
键入以下内容：

您可以获取该div中所有输入的列表，并检查它们是否被选中，如果它们被选中，您可以删除div和输入

函数addItem（）{
var input=document.getElementById（“文本框”）；
var wrapper=document.getElementById（“检查表项目”）；
if（input.value.trim（）！=“”）{
var new_element=document.createElement（“DIV”）；
new_element.innerHTML=''+input.value；
appendChild（新的_元素）；
}
否则{
警报（“您必须输入至少1个字符。”）；
}
}
函数removietem（）{
var ele=document.querySelector（“#检查表_项”）.queryselectoral（'div'））
对于（设i=0；i），您需要在添加复选框时添加一个唯一的Id
var i=0；
函数addItem（）{
i=i+1；
var input=document.getElementById（“文本框”）；
var wrapper=document.getElementById（“检查表项目”）；
if（input.value.trim（）！=“”）{
var new_element=document.createElement（“DIV”）；
新的元素setAttribute（“id”，“add”+i）；
new_element.innerHTML=''+input.value；
appendChild（新的_元素）；
}
否则{
警报（“您必须输入至少1个字符。”）；
}
}
var-removeList=[]；
函数setRemoveableList（val）{
移除列表推送（val）；
}
函数removietem（）{
对于（var j=0；ju）您正在检查包含的divchecklist\u items是否被选中，但您需要检查它包含的输入是否被选中。什么是$，在$行（“checklist\u items”）。remove（），jQuery，您是否在html中包含jQuery？
    You need to add an unique Id based when you add check box
var i=0; 
function addItem() {
    i=i+1;
    var input = document.getElementById("textbox");
    var wrapper = document.getElementById("checklist_items");
    if(input.value.trim() != "") {
        var new_element = document.createElement("DIV");
        new_element .setAttribute("id", "add"+i);
        new_element.innerHTML = '<input type="checkbox" onclick="setRemoveableList(i)"> '+input.value;
        wrapper.appendChild(new_element);
    }
    else{
        alert("You must enter at least 1 character.");
    }
}
var removeList=[];
function setRemoveableList(val){
    removeList.push(val);
}

function removeItem(){
      for(var j=0;j<removeList.length;j++){
        var cuurrId='add'+removeList[j];
         var rm= document.getElementById(cuurrId);
        return rm.parentNode.removeChild(rm);
         //either you can hide the div by $("#"+cuurrId).hide()

        }
    }