Unable to remove checkbox with JavaScript

Question

Actually, I want to remove a specific checkbox div from at any time. As trying to give a functionality that a user can add or remove a checkbox perfectly.

I wrote the code I try to add or rest the check box but when I try to remove the checkbox it does not work and I am not figuring out what is the problem.

Can someone fix it?

function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name="todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";
  


  div.appendChild(checkbox);

  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  li.appendChild(div);
  ul.appendChild(li);
}
function addElement(elementId, html) {
    // Adds an element to the document
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
   
}
var checkId = 0;
function addcheck() {
    checkId++; // increment fileId to get a unique ID for the new element
    var html = '<a href="" onclick="javascript:removeElement( checkId ); return false;">Remove</a>';
    addElement(  checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem , addcheck() ;

<body>
<h1>Add or remove element</h1>
<hr>
<br>
<ul  id="ul">
</ul>
</div>
<button type="button" id="btn" onclick="addItems ,  addFile() ">Add More</button>
<input type="text" id="texto">
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset">

did you try to use the console? right click and you will see inspect element in the browser and then choose console and you will see if there is any errors in your code like that newElement isnt defined in your code — youssef ali
– youssef ali, Commented Apr 7, 2019 at 6:46

youssef ali · Accepted Answer · 2019-04-07 08:11:33Z

1

here is the working code ok Eddie ?

    function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name="todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}
function removeElement(linkElement) {
    // Removes an element from the document
    var element = linkElement.parentNode.parentNode;//to get to the li element

    element.parentNode.removeChild(element);
}
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li

  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";



  div.appendChild(checkbox);

  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  addcheck(div)
  li.appendChild(div);
  ul.appendChild(li);
}
function addElement(div,elementId, html) {
    // Adds an element to the document
    div.setAttribute('id', elementId);
    div.innerHTML += html;

}
var checkId = 0;
function addcheck(div) {
    checkId++; // increment fileId to get a unique ID for the new element
    var html = '<a class="link" href="" onclick="javascript:removeElement( this ); return false;">Remove</a>';
    addElement( div, checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem  ;

add this css for just readability but i think you will add more to the css

<style>
       .link{
         padding-left: 10px;
       }
</style>

edited Apr 7, 2019 at 8:11

answered Apr 7, 2019 at 7:02

youssef ali

4265 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ninja Ninja Over a year ago

This is adding remove link before the checkbox I want to add this after the checkbox how I can achieve this in the current situation? @youssef ali

Ninja Ninja Over a year ago

bro, I was thinking last night what if we also make these checkbox texts editable like we edit a comment .How we will achieve it

youssef ali Over a year ago

you can change the type of input here checkbox.type = "checkbox"; so whatever you want edit it here, like checkbox.type = "text";

Dmitriy · Accepted Answer · 2019-04-07 09:15:53Z

There is a way to do it with a single function:

<body>

  <h1>Add or remove element</h1>
  <hr>
  <br>
    <div>
      <ul  id="ul">
      </ul>
    </div>
  <button type="button" id="btn" onclick="addItem()">Add More</button>
  <input type="text" id="texto">
  <input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset">

</body>
</html>



<script type="text/javascript">


function uncheckAll2() {
  var inputs = document.querySelectorAll('input[name="todo[]"]');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}

var checkId = 0;
function addItem() {
  var ul = document.getElementById('ul'); //ul
  var li = document.createElement('li'); 
  var div = document.createElement('div'); //li
  var checkbox = document.createElement('input');

  checkbox.type = "checkbox";
  checkbox.value = 1;
  checkbox.name = "todo[]";
  checkbox.className = "textt";

  li.id = checkId;
  removeLink = '<a href="" onclick="javascript:document.getElementById(\''+checkId+'\').remove();return false;">Remove</a>';
  checkId++;

  div.appendChild(checkbox);
  var text = document.getElementById('texto');
  div.appendChild(document.createTextNode(text.value));
  div.innerHTML+=removeLink;
  li.appendChild(div);
  ul.appendChild(li);
}



</script>

Collectives™ on Stack Overflow

Unable to remove checkbox with JavaScript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related