2

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 = ''; });
Improve this question
1

1 Answer 1

Reset to default
1

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(); }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It works for me. Check out jsbin.com/bufoye/2/embed?html,js,output . I add items first using the "Nieuwe taak" button and then type in the item I want removed and then click "Verwijder lijst" button... The same code can be moved a bit to add delete buttons to each item

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.