How to delete a check box using javascript

Question

I'm working on this HTML Page where i can add a check-box along with the label by clicking the add button, is there anyway that i can have a delete button as well so that when i select a check-box and press the delete button the check-box along with the text box is deleted??Please find my code below!!

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

can we see your try code to help you ? or provide jsfiddle ? — Hariharan, Oct 29 '13 at 05:08
possible duplicate of [Remove element from DOM](http://stackoverflow.com/questions/16718871/remove-element-from-dom) — Barmar, Oct 29 '13 at 05:11
@Santosh459 updated answer based on your requirement. check please — painotpi, Oct 29 '13 at 05:37

painotpi · Answer 1 · 2013-10-29T05:37:04.957

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

In pure javascript, you can do this,

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

score 1 · Answer 2 · answered Oct 29 '13 at 05:27

Give all of the check boxes that could potentially be deleted the same class. Additionally label all of the text boxes that could be deleted with their own class. My check boxes will be labeled with chk and my text boxes will be labeled with txt. As in:

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

The following solution should work as long as check boxes and text fields are 1 to 1.

the function you will add to your delete button will loop through all of the check boxes and see if they are deleted and then delete the checked ones.

Heres the 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);
        }
    }
}

That will delete all of the checked check boxes, all you have to do now is make a button and add that function as an onclick.

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

score 0 · Answer 3 · answered Oct 29 '13 at 05:16

0

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.");
          }
}

I hope this will help.

Refer fiddle - http://jsfiddle.net/F8w8B/3/

answered Oct 29 '13 at 05:16

Hariharan

3,191
4
19
31

Hi hariharan,there is a provision for adding multiple checkboxes in this code can i delete all of them by checking on them and clicking the delete button?? – Santosh459 Oct 29 '13 at 05:22
yes, if you are able to get the refer of the component, then you can able to delete it all. place a parent div and add all the checkbox inside that div, if you like to delete all. call that parent div and remove it. – Hariharan Oct 29 '13 at 05:26

How to delete a check box using javascript

3 Answers3

Linked