CODEWITHSUNDEEP
javascriptarrays
Jordy Kolster
Jordy Kolster

Reputation: 31

Remove specific item from array

Is there a simple way to delete specific items. Now you can only delete the whole list. there has to be a remove button for each item so you can remove a specific item. so each item has to have a remove button attached so you can click it and then remove that item.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To do 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;
    for (i=0; i < 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 = '';                                          
});

Upvotes: 2

Views: 272

Answers (1)

M El
M El

Reputation: 81

I made some modifications to your js and added a few functions.

var takenLijst = document.getElementById('takenLijst');
var invulVeld = document.getElementById('invulVeld');
var voegToe = document.getElementById('voegToe');
var verwijderLijst = document.getElementById('verwijderLijst');  // updated this since your js above had the 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();
  }
});

// You could use list.indexOf in this function instead of the for loop
// But if list contains anything other than a string, indexOf will not 
// return it because of strict equality
function findItem(item){
  var i, l;
  for(i = 0, l = list.length; i < l; i++){
    if ( list[i] == item){
      return i;
    }
  }

  return -1;
}

function deleteItem(index){
  list.splice(index, 1);
}

function update(){
  var i, html = '';

  for (i=0; i < list.length; i++) {                                   
    html += '<li>' + list[i] + '</li>';           
  }                                                                   

  takenLijst.innerHTML = html;
  totaal.innerHTML = i;
  invulVeld.focus();
}

Upvotes: 1

Related Questions