从数组中删除特定物品

问题描述：

是否有简单的方法来删除特定物品。现在你只能删除整个列表。每个项目必须有一个删除按钮，以便您可以删除特定项目。所以每个项目都必须有一个删除按钮，所以你可以点击它，然后删除该项目。从数组中删除特定物品

的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>

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

的〔从数组中删除特定元素？]可能重复（http://stackoverflow.com/questions/5767325/remove-specific-element-from-an-array） –

答

我做了一些修改您的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(); 
}

不工作时，将删除任何 –

它适合我。查看http://jsbin.com/bufoye/2/embed?html,js,output。我首先使用“Nieuwe taak”按钮添加项目，然后键入我想要移除的项目，然后单击“Verwijder lijst”按钮...可以移动相同的代码以将删除按钮添加到每个项目 –

是否工作为你？ –

从数组中删除特定物品

相关推荐