CODEWITHSUNDEEP
javascripthtmlcheckbox
Santosh459
Santosh459

Reputation: 23

How to delete a check box using javascript

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>

Upvotes: 0

Views: 22465

Answers (3)

painotpi
painotpi

Reputation: 6996

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

Upvotes: 1

Nick Chapman
Nick Chapman

Reputation: 4624

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

Upvotes: 1

Hariharan
Hariharan

Reputation: 3263

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/

Upvotes: 0

Related Questions