如何使用javascript删除复选框答案

【问题标题】：How to delete a check box using javascript如何使用javascript删除复选框
【发布时间】：2013-10-29 05:07:55
【问题描述】：

我正在处理这个 HTML 页面，我可以通过单击添加按钮在标签上添加一个复选框，无论如何我也可以有一个删除按钮，这样当我选择一个复选框时然后按删除按钮，复选框连同文本框被删除？？请在下面找到我的代码！！

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Add()
{
var checkbox=document.createElement('input');
var inps=document.createElement('input');
var output=document.getElementById('output');
checkbox.type='checkbox';
inps.type='text';
inps.name='textboxname';
checkbox.name='checkname';
output.appendChild(checkbox);
output.appendChild(inps);
output.appendChild(document.createElement('br'));
}
</script>
</head>
<body>
<form action="http://localhost:9990" method="post">
<span id="output"></span>
<input type="button" value="Add" onclick="Add()">
<center>
<p>
<input type="file" name="datafile" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</center>
</form>
</body>
</html>

【问题讨论】：

我们可以查看您的试用代码来帮助您吗？还是提供jsfiddle？
贴你代码，最好做个小提琴
Remove element from DOM的可能重复
我的试用码在上面
@Santosh459 根据您的要求更新了答案。请检查

标签： javascript html checkbox

【解决方案1】：

将所有可能被删除的复选框放在同一个类中。另外标记所有可以用自己的类删除的文本框。我的复选框将用 chk 标记，我的文本框将用 txt 标记。如：

<input type="checkbox" class = 'chk' /> and
<input type="text" class = 'txt' />

只要复选框和文本字段是 1 比 1，以下解决方案应该可以工作。

您将添加到删除按钮的功能将遍历所有复选框并查看它们是否被删除，然后删除选中的复选框。

这是 JS：

function delBoxes(){
    var boxes = document.getElementsByClassName('chk');
    var texts = document.getElementsByClassName('txt');
    for(var i = 0; i<boxes.length; i++){
        box = boxes[i];
        txt = texts[i];
        if(box.checked){
            box.parentNode.removeChild(box);
            txt.parentNode.removeChild(txt);
        }
    }
}

这将删除所有选中的复选框，您现在要做的就是制作一个按钮并将该功能添加为 onclick。

<input type="button" value="Delete checked boxes" onclick = "delBoxes();" />

【讨论】：

【解决方案2】：

示例 HTML

<div>
    <input type='checkbox' value='asd' id='test' name='test' />
    <input type='checkbox' value='asd' id='tester' name='test' />
    <input type='button' value='remove' id='rmvBtn' />
</div>

在纯javascript中，你可以做到这一点，

var rmvBtn = document.getElementById('rmvBtn');

rmvBtn.addEventListener('click', function(){
   var rmvCheckBoxes = document.getElementsByName('test');

    for(var i = 0; i < rmvCheckBoxes.length; i++)
    {
        if(rmvCheckBoxes[i].checked)
        {
            removeElm(rmvCheckBoxes[i]);    
        }
    }  
});

function removeElm(elm){
   elm.parentElement.removeChild(elm);
}

JS Fiddle

【讨论】：

【解决方案3】：

HTML

<input type="checkbox" id="checkboxid" name="checkboxname">
 <button id="btnDeleteid" onclick="deleteCheckBox()" name="btnDeletename">Delete</button>

JavaScript

function deleteCheckBox(){
  if (document.getElementById('checkboxid').checked){
        var answer = confirm('Are you sure you want to delete this checkbox?');
         if (answer)
           {
           $("#checkboxid").remove();
           }
         }else{
           alert("Pls check the checkbox.");
          }
}

我希望这会有所帮助。

参考小提琴 - http://jsfiddle.net/F8w8B/3/

【讨论】：

您好，hariharan，在这段代码中有一个添加多个复选框的规定，我可以通过检查它们并单击删除按钮来删除它们吗？？
是的，如果你能得到组件的引用，那么你就可以把它全部删除。如果您想全部删除，请放置一个父 div 并在该 div 中添加所有复选框。调用该父 div 并将其删除。