CODEWITHSUNDEEP
javascriptjqueryhtml
Ninja Ninja
Ninja Ninja

Reputation: 25

Unable to remove checkbox with JavaScript

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

Upvotes: 0

Views: 104

Answers (2)

Dmitriy
Dmitriy

Reputation: 91

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>

Upvotes: 1

youssef ali
youssef ali

Reputation: 426

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>

Upvotes: 1

Related Questions