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
– Hariharan, Commented Oct 29, 2013 at 5:08
@Santosh459 updated answer based on your requirement. check please — painotpi
– painotpi, Commented Oct 29, 2013 at 5:37

Nick Chapman · Accepted Answer · 2013-10-29 05:27:34Z

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();" />

painotpi · Accepted Answer · 2013-10-29 05:37:04Z

1

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

edited Oct 29, 2013 at 5:37

answered Oct 29, 2013 at 5:26

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Comments

Hariharan · Accepted Answer · 2013-10-29 05:16:15Z

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, 2013 at 5:16

Hariharan

3,2834 gold badges22 silver badges31 bronze badges

2 Comments

Santosh459 Over a year ago

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

Hariharan Over a year ago

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.

Collectives™ on Stack Overflow

How to delete a check box using javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related