是否有删除特定项目的简单方法。现在,您只能删除整个列表。每个项目都必须有一个删除按钮,以便您可以删除特定项目。因此,每个项目都必须具有一个“删除”按钮,以便您可以单击它然后删除该项目。

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 = '';
});

最佳答案

我对您的js进行了一些修改,并添加了一些功能。

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();
}

09-25 17:15
查看更多