javascript - Remove specific item from array -
is there simple way delete specific items. can delete whole list. there has remove button each item can remove specific item. each item has have remove button attached can click , remove item.
html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>to list</title> <link rel="stylesheet" type="text/css" href="/css/todo.css"> </head> <body> <form> <input class="field" type="text" id="invulveld"/><button class="btn" id="voegtoe">nieuwe taak</button><button class="btn" id="verwijderlijst">verwijder lijst</button> </form> <ul id="takenlijst"> </ul> <article>totaal aantal taken <a id="totaal"></a></article> <script src="js/todo.js"></script> </body> </html>
js
var takenlijst = document.getelementbyid('takenlijst'); var invulveld = document.getelementbyid('invulveld'); var voegtoe = document.getelementbyid('voegtoe'); var verwijderlijst = document.getelementbyid('verwijder'); var list = []; voegtoe.addeventlistener('click', function() { event.preventdefault(); takenlijst.innerhtml = ''; if (invulveld.value !== '') { list.push(invulveld.value); invulveld.value = ''; } var i; (i=0; < list.length; i++) { takenlijst.innerhtml += '<li>' + list[i] + '</li>'; } document.getelementbyid('totaal').innerhtml = i; invulveld.focus(); }); takenlijst.addeventlistener('click', function() { var taak = event.target; if (taak.tagname !== 'li') { return; } if(taak.classname == "checked") { taak.classname = ""; } else { taak.classname = "checked"; } }); verwijderlijst.addeventlistener('click', function() { list.length = 0; takenlijst.innerhtml = ''; });
i made modifications js , added few functions.
var takenlijst = document.getelementbyid('takenlijst'); var invulveld = document.getelementbyid('invulveld'); var voegtoe = document.getelementbyid('voegtoe'); var verwijderlijst = document.getelementbyid('verwijderlijst'); // updated since js above had wrong id var totaal = document.getelementbyid('totaal'); var list = []; voegtoe.addeventlistener('click', function() { event.preventdefault(); if (invulveld.value !== '') { list.push(invulveld.value); invulveld.value = ''; } update(); // update html }); takenlijst.addeventlistener('click', function() { var taak = event.target; if (taak.tagname !== 'li') { return; } if(taak.classname == "checked") { taak.classname = ""; } else { taak.classname = "checked"; } }); verwijderlijst.addeventlistener('click', function(event) { event.preventdefault(); var index = finditem(invulveld.value); if( index !== -1){ deleteitem(index); invulveld.value = ''; update(); } }); // use list.indexof in function instead of loop // if list contains other string, indexof not // return because of strict equality function finditem(item){ var i, l; for(i = 0, l = list.length; < l; i++){ if ( list[i] == item){ return i; } } return -1; } function deleteitem(index){ list.splice(index, 1); } function update(){ var i, html = ''; (i=0; < list.length; i++) { html += '<li>' + list[i] + '</li>'; } takenlijst.innerhtml = html; totaal.innerhtml = i; invulveld.focus(); }
Comments
Post a Comment