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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -