DSanches DSanches - 6 months ago 28
Javascript Question

getting the value of checked checkbox to remove from div with DOM

I have a doubt in selecting and verify that the

checkbox
is checked in a
div
with
id="div1"
which in turn is added in another
div
with
id = "box"
and the result is checkbox -> div.id = div1 -> divbox.id = box

I have this base function to create
checkbox
and insert in
div1
and add
div1
to
div box
and it´s work and I don´t put the
css
code because don´t need

function createCheckBox() {
//count
var count = 0;

//create div1
var div1 = document.createElement('div');
div1.id = "div1";
div1.style.fontSize = "20px";

//div box
var divbox = document.createElement('div');
divbox.id = "box";

//checkbox
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "checkBox" + (count++);
checkbox.id = checkbox.name;

var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode("checkBox" + (count++)));
var br = document.createElement('br');

div1.appendChild(checkbox);
div1.appendChild(label);
div1.appendChild(br);

divbox.appendChild(div1);

document.body.appendChild(divbox);
}


my doubt is select checkbox check and return if is
checked
or not
and in this
function removeCheckBox
I wanna get value of checked checkbox
in this way divbox.id = box -> div.id = div1 -> checkbox.checked and it´s not work

function removeCheckBox() {
//box
var divbox = document.getElementById("box");
//inside divbox select element with id = div1
var div1 = divbox.getElementById("div1");

for (var i = 0; div1.childNodes.length; i++) {
if (div1.childNodes[i].checked) {
alert("CheckBox is checked");
//remove from div1
div1.removeChild(div1.childNodes[i]);
} else {
alert("CheckBox is not checked");
}
}
}


any suggestion?

Answer

There is solution (description in code comment), based on all those comments :

function removeCheckBox() {
  var box=document.getElementById('box');
  //get all checked checkboxes inside box div
  var chk=box.querySelectorAll('[type="checkbox"]:checked');
  for(var i=0;i<chk.length;i++) {
   box.removeChild(chk[i].parentNode); //remove complete div, who is parent of checked checkbox
  }
}


function createCheckBox() {
  //count
  var count = 0;

  var div = document.createElement('div');
  div.id = "div1";
  div.style.fontSize = "20px";

  //div box 
  var box = document.getElementById('box');

  //checkbox
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.name = "checkBox" + (count++).toString();
  checkbox.id = checkbox.name;
  
  var label = document.createElement('label')
  label.htmlFor = "id";
  label.appendChild(document.createTextNode("checkBox" + (count++)));
  var br = document.createElement('br');

  div.appendChild(checkbox);
  div.appendChild(label);
  div.appendChild(br);

  box.appendChild(div);
}
<input type="button" value="create" onclick="createCheckBox();" />
<input type="button" value="remove" onclick="removeCheckBox();" />
<br>
<div id="box">

</div>