I want to remove an array item when generated check box checked

Question

I made a todolist which is taking value from input and add an item from array so when the given value shown in page i want to remove an item form array whn checkbox checked.

Html part :

<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>

javascript part:

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div><input id='box' onClick='remove()' type='checkbox' /><label>" + data[i] + "</label></div>";
    }
}
function remove() {
    var check = document.getElementById('box').value;
    for ( var i in list) {
        if (list[i]!= check) {

        }
    }
}

For an `` you'll need to use `.checked` in Javascript, which will return a boolean, not `.value`. Also, you'll want to wrap your `` tag around the whole `` tag. Just a couple pointers. — Andrew, Dec 06 '16 at 06:27
Possible duplicate of [How to remove a particular element from an array in JavaScript?](http://stackoverflow.com/questions/5767325/how-to-remove-a-particular-element-from-an-array-in-javascript) — Mohayemin, Dec 06 '16 at 06:28
A couple more pointers on your actual problem: Look up how to add event handlers to dynamically created elements. Also look up event delegation. — Andrew, Dec 06 '16 at 06:33
Just loop through all elements of list and remove checked element using splice method — Kenny, Dec 06 '16 at 06:36
Adding more to @Andrew 's comment: You are creating multiple elements with duplicate Id which is invalid html. In remove function `check` will return first element always — Anupam, Dec 06 '16 at 06:37

prasanth · Accepted Answer · 2016-12-06T07:06:52.713

Try this with pure javascript :

Array.splice and Array.indexof()

Add with checkbox inside the label tag.

And click event change with remove(this).Then easly find the label text and match with list array.

contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] + 
              "</label></div>";
        }

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div><label><input id='box' onClick='remove(this)' type='checkbox' />" + data[i] + 
          "</label></div>";
    }
}
function remove(that) {
    var check = that.parentElement.textContent;
  //that.remove() if you need remove clicked box
    for ( var i in list) {
        if (list[i] == check) {
              list.splice(list.indexOf(check),1);
        }
    }
  console.log(list)
}

<input type="text" id="field" placeholder="Type name" />
<button type="submit" onclick="insertitem()">Submit</button>
<p id="para"></p>

Have you tested your code? Remove will not work. For dynamic elements events are binded separately. — Anupam, Dec 06 '16 at 06:50
@anu see the snippet its working.Is remove the array value with selected check box label text — prasanth, Dec 06 '16 at 06:58
My bad. I read the question wrong, I thought OP wants to remove the checkbox itself. — Anupam, Dec 06 '16 at 07:00

score 0 · Answer 2 · answered Dec 06 '16 at 07:03

var list = [];
var input;
function insertitem() {
    input = document.getElementById('field').value;
    list.push(input);
    DisplayItem(list);
    document.getElementById('field').value='';

}
function DisplayItem(data) {
    var contain = document.getElementById('para');
    contain.innerHTML='';
    for ( var i in data) {
        contain.innerHTML +="<div id='remove" + i + "'><label for='box" + i + "'><input id='box" + i + "' onClick='remove(" + i + ")' type='checkbox' />" + data[i] + "</label></div>";
    }
}
function remove(targetId) {
    var check = document.getElementById('box' + targetId).checked;
    if(check){
      console.log('Remove box' + targetId);
      document.getElementById('remove' + targetId).innerHTML='';
    }
}

  <input type="text" id="field" placeholder="Type name" />
  <button type="submit" onclick="insertitem()">Submit</button>
  <p id="para"></p>

I just modified your JavaScript to pass an ID with a number to set each label apart from each other..

I want to remove an array item when generated check box checked

2 Answers2