Удалить конкретный элемент из массива

Есть ли простой способ удалить определенные элементы. Теперь вы можете удалить весь список. должна быть кнопка удаления для каждого элемента, чтобы вы могли удалить определенный элемент. поэтому каждый элемент должен иметь прикрепленную кнопку удаления, чтобы вы могли щелкнуть ее, а затем удалить этот элемент.Удалить конкретный элемент из массива

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» ... Один и тот же код можно немного поместить, чтобы добавить кнопки удаления к каждому элементу. –

Работало ли оно для тебя? –

Удалить конкретный элемент из массива

ответ

Смежные вопросы