从 ul javascript 中添加/删除 <li> 元素

Add/remove <li> element from the ul javascript

本文关键字：元素 li 删除 javascript ul 添加      更新时间：2023-09-26

我是JavaScript的新手，还在学习各种东西。现在，我坚持在列表中添加和删除li元素。我使用 jQuery 做得很好，但现在在同一任务的纯 JS 版本上遇到了困难。

主要思想是通过单击按钮来添加新的 li 元素，并通过单击旁边的 X 按钮来删除该元素。我尝试使用"这个"和Stackoverflow上类似问题中提到的其他建议，但没有任何效果。你能指导我做错了什么吗？

附言添加函数似乎在代码片段中工作，但控制台记录错误：无法读取 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>

这将返回一个非实时集合：

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

这意味着它将只包含方法调用点存在的对象。您需要在创建新的li元素后调用getElementsByClassName()，并将事件侦听器附加到插入按钮上。只要记住不要在按钮上放置两次事件侦听器。

更好的解决方案

更好的是：不要使用 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);
    });
});

在您的情况下，btn 是元素的节点列表，而不是元素，因此您无法将事件附加到数组。您需要遍历它们：

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

在学习，作为一个新人，这是一个很好的小挑战。感谢 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();
    }
});
相关文章：