從數組中刪除特定項目

Question

是否有一種簡單的方法可以刪除特定項目。 現在您只能刪除整個列表。 每個項目必須有一個刪除按鈕，以便您可以刪除特定項目。 所以每個項目都必須附加一個刪除按鈕，以便您可以單擊它然后刪除該項目。

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

Answer 1

我對您的 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();
}

從數組中刪除特定項目

問題描述

1 個解決方案

解決方案1
1 已采納 2015-06-14 13:44:34

從數組中刪除特定項目

問題描述

1 個解決方案

解決方案1 1 已采納 2015-06-14 13:44:34

解決方案1
1 已采納 2015-06-14 13:44:34