添加/刪除 <li> ul javascript中的元素

Question

我是JavaScript新手，仍然在學習各種東西。 現在，我一直堅持從列表中添加和刪除li元素。 我使用jQuery做得很好，但是現在使用同一任務的純JS版本存在困難。

主要思想是通過單擊按鈕來添加新的li元素，並通過單擊其旁邊的X按鈕來刪除該元素。 我已經嘗試過使用“ this”和在Stackoverflow上類似問題中提到的其他建議，但對我沒有任何幫助。 能否請您指導我我做錯了什么？

PS添加功能似乎在代碼段中起作用，但是控制台記錄錯誤：無法讀取null的屬性'addeventlistener'。

 //declaring the variables var btn = document.getElementsByClassName('btn'); var list = document.getElementById('list'); var add = document.getElementById('add'); //adding a new element to the list add.addEventListener('click', function(){ var newElement = document.createElement('LI'); list.appendChild(newElement); newElement.innerHTML= "I am a new element<button class='btn'>X</button>"; }); //removing the clicked element btn.addEventListener('click', function(){ list.parentNode.removeChild(this); }); 

 ul li { decoration: none; display: block; margin-top: 1em; text-align: center; font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; font-size: 18px; } #add { background-color: black; color: white; border: none; width: 280px; font-color: white; border-radius: 8px; font-size: 16px; padding: 15px; outline: none; text-align: center; margin: 20px auto; display: block; } #add:hover { background-color: #28364d; color: white; border: none; outline: none; } #add:active { position: relative; bottom: 2px; } .btn{ margin-left: 10px; border-radius: 10px; background-color: #000; color: white; border: none; outline: none; font-size: 14px; font-family: sans-serif; } .btn:active { position: relative; bottom: 2px; } 

 <div> <ul id="list"> <li class="element">I am a new element<button class="btn">X</button></li> <li class="element">I am a new element<button class="btn">X</button></li> <li class="element">I am a new element<button class="btn">X</button></li> <li class="element">I am a new element<button class="btn">X</button></li> <li class="element">I am a new element<button class="btn">X</button></li> </ul> <button id="add">Add an element to the list</button> </div> 

Answer 1

在您的情況下， btn是元素的節點列表，而不是元素，因此您無法將事件附加到數組。 您需要遍歷它們：

for(i=0; i < btn.length; i++) {
   btn[i].addEventListener('click', function(){
      list.parentNode.removeChild(this);
   });
}

Answer 2

這將返回一個非實時集合：

var btn = document.getElementsByClassName('btn');

這意味着它將僅包含方法調用時存在的對象。 創建新的li元素后，需要調用getElementsByClassName() ，並將EventListeners附加到單個按鈕上。 只要記住不要在按鈕上兩次放置一個EventListener即可。

更好的解決方案

更好的是：不要使用getElementsByClassName() ，只需將事件處理程序直接附加到函數中即可在其中創建新按鈕。 這樣，您不必擔心預先存在的事件處理程序：

add.addEventListener('click', function(){
    var newElement = document.createElement('LI');
    list.appendChild(newElement);
    newElement.innerHTML= "I am a new element<button class='btn'>X</button>";
    newElement.addEventListener('click', function () {
        this.parentNode.removeChild(this);
    });
});

Answer 3

我也在學習，作為一個新手，這是一個很好的小挑戰。 感謝rlemon通過該文章鏈接為我們指出正確的方向。 我在這里學到了一些東西。

如果您對我到達的地方感興趣，請訪問： https : //jsfiddle.net/nyxhj0tg/1/

JS：

var list = document.getElementById('list');
var add = document.getElementById('add');

//adding a new element to the list
add.addEventListener('click', function(){
  var newElement = document.createElement('LI');
  list.appendChild(newElement);
  newElement.innerHTML= "I am a new element<button class='btn'>X</button>";

});

list.addEventListener('click', function(e){
  if(e.target && e.target.nodeName == "BUTTON") {
        console.log("Button ", e, " was clicked!");
    e.target.parentNode.remove();
    }
});