Add/remove <li> 来自 ul javascript 的元素
Add/remove <li> element from the ul javascript
我是 JavaScript 的新人,仍在学习各种东西。现在我坚持在列表中添加和删除 li 元素。我使用 jQuery 很好地完成了练习,但现在使用同一任务的纯 JS 版本遇到了困难。
主要思想是通过单击按钮添加一个新的 li 元素,并通过单击旁边的 X 按钮删除该元素。我尝试使用 'this' 和 Whosebug 上类似问题中提到的其他建议,但对我没有任何帮助。你能指导我我做错了什么吗?
P.S。添加功能似乎在片段中工作,但控制台记录错误:无法读取 属性 'addeventlistener' of null.
//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>
在您的例子中,btn
是元素的节点列表,而不是元素,因此您不能将事件附加到数组。您需要遍历它们:
for(i=0; i < btn.length; i++) {
btn[i].addEventListener('click', function(){
list.parentNode.removeChild(this);
});
}
这 returns 一个非实时集合:
var btn = document.getElementsByClassName('btn');
这意味着它将只包含在方法调用点存在的对象。您需要在创建新的 li
元素后调用 getElementsByClassName()
,并将 EventListeners 附加到 invidual 按钮上。请记住不要在按钮上放置两次 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);
});
});
我也在学习,作为新手,这是一个很好的小挑战。感谢 rlemon 用那篇文章 link 为我们指明了正确的方向。我在这里学到了一些东西。
如果您对我的结论感兴趣:
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();
}
});
我是 JavaScript 的新人,仍在学习各种东西。现在我坚持在列表中添加和删除 li 元素。我使用 jQuery 很好地完成了练习,但现在使用同一任务的纯 JS 版本遇到了困难。
主要思想是通过单击按钮添加一个新的 li 元素,并通过单击旁边的 X 按钮删除该元素。我尝试使用 'this' 和 Whosebug 上类似问题中提到的其他建议,但对我没有任何帮助。你能指导我我做错了什么吗?
P.S。添加功能似乎在片段中工作,但控制台记录错误:无法读取 属性 'addeventlistener' of null.
//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>
在您的例子中,btn
是元素的节点列表,而不是元素,因此您不能将事件附加到数组。您需要遍历它们:
for(i=0; i < btn.length; i++) {
btn[i].addEventListener('click', function(){
list.parentNode.removeChild(this);
});
}
这 returns 一个非实时集合:
var btn = document.getElementsByClassName('btn');
这意味着它将只包含在方法调用点存在的对象。您需要在创建新的 li
元素后调用 getElementsByClassName()
,并将 EventListeners 附加到 invidual 按钮上。请记住不要在按钮上放置两次 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);
});
});
我也在学习,作为新手,这是一个很好的小挑战。感谢 rlemon 用那篇文章 link 为我们指明了正确的方向。我在这里学到了一些东西。
如果您对我的结论感兴趣: 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();
}
});