從數組中刪除特定物品

是否有簡單的方法來刪除特定物品。現在你只能刪除整個列表。每個項目必須有一個刪除按鈕，以便您可以刪除特定項目。所以每個項目都必須有一個刪除按鈕，所以你可以點擊它，然後刪除該項目。從數組中刪除特定物品

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

來源

2015-06-14 Jordy Kolster

的〔從數組中刪除特定元素？]可能重複（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(); 
}

來源

2015-06-14 13:44:34

不工作時，將刪除任何 –

它適合我。查看http://jsbin.com/bufoye/2/embed?html,js,output。我首先使用「Nieuwe taak」按鈕添加項目，然後鍵入我想要移除的項目，然後單擊「Verwijder lijst」按鈕...可以移動相同的代碼以將刪除按鈕添加到每個項目 –

是否工作爲你？ –

從數組中刪除特定物品

回答

相關問題