單擊按鈕時刪除列表項

Question

我一直想修改此代碼以包括一個delete按鈕，因此單擊該按鈕時，列表項將被刪除，但無法正常工作。

//ORIGINAL CODE//

let elList, addLink, newEl, newText, counter, listItems, oldEl, removeLink; 

elList  = document.getElementById('list');             
addLink = document.querySelector('a');               
counter = document.getElementById('counter'); 

oldEl = document.getElementsByTagName('li');

removeLink = document.getElementById('delete');      


function addItem(e) {                                   
    e.preventDefault();   
    newEl = document.createElement('li');

newText = document.createTextNode('New list item');

newEl.appendChild(newText);                         

    elList.appendChild(newEl);                             
  }

function updateCount() {                                 
  listItems = elList.getElementsByTagName('li').length;  
  counter.innerHTML = listItems;                        
}

addLink.addEventListener('click', addItem, false);      
elList.addEventListener('DOMNodeInserted', updateCount, false); 

//WHAT I TRIED//
function removeItem(){

e.preventDefault();

oldEl.parentNode.removeChild(oldEl);
} 

removeLink.addEventListener('click', removeItem, false);

我希望當我單擊“刪除”按鈕時，列表項之一消失，但它沒有任何作用。 請我需要一些幫助，因為我已經被困在這里很長時間了

Answer 1

oldEl = document.getElementsByTagName('li');

getElementsByTagName返回一個NodeList，您不能通過以下操作將其刪除：

oldEl.parentNode.removeChild(oldEl);

如果要刪除oldEl中的所有項目，請執行以下操作：

function removeItems(){
  oldEl.forEach((item) => {
    item.parentNode.removeChild(item);
  });
}