如何解决如何将“删除按钮”附加到在 JS 中新创建的每个列表项?
使用 JS DOM 的购物清单练习。 我的完整代码:https://codepen.io/lil_a/pen/BaQKvqZ?editors=0110
我必须为每个新创建的列表项添加一个新的“删除”按钮。我设法做到了,但它只将我创建的按钮附加到最后一个列表项,而不是其他新添加的项。如何做到让每个列表项都有一个新的删除按钮?
我搜索过类似的问题,但一般来说,代码与我的不同,我必须全部重做。有没有办法用我的代码做到这一点?
HTML
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id = "list">
<li>Notebook<button class="btn">Delete</button></li><br>
<li>Jello<button class="btn">Delete</button></li><br>
<li>Spinach<button class="btn">Delete</button></li><br>
<li>Rice<button class="btn">Delete</button></li><br>
<li>Birthday Cake<button class="btn">Delete</button></li><br>
<li>Candles<button class="btn">Delete</button></li><br>
</ul>
JS
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li).addEventListener("click",toggleList);
//append and toggle on and off new list items
input.value = "";
ul>li.appendChild(deleteButton).addEventListener("click",removeItem);
//append "delete button" to newly added "li"
}
var elements = document.getElementsByClassName("btn");
for (var i = 0; i < elements.length; i++){
elements[i].addEventListener("click",removeItem);
}
function removeItem(){
this.parentNode.remove();
}
var deleteButton = document.createElement("button");
deleteButton.setAttribute("class","btn");
deleteButton.appendChild(document.createTextNode("Delete"));
解决方法
您好,您只需将删除按钮代码移动到您的 createListElement()
函数中
见我附上了你的代码见下文...
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');
function inputLength() {
return input.value.length;
}
function createListElement() {
/*Your delete button code MOVED HERE*/
var deleteButton = document.createElement("button");
deleteButton.setAttribute("class","btn");
deleteButton.appendChild(document.createTextNode("Delete"));
/*end*/
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li).addEventListener("click",toggleList); //append and toggle on and off new list items
input.value = "";
ul>li.appendChild(deleteButton).addEventListener("click",removeItem); //append "delete button" to newly added "li"
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
button.addEventListener("click",addListAfterClick);
input.addEventListener("keypress",addListAfterKeypress);
//Toggle list item on and off when clicked on
var list = document.querySelectorAll('ul>li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click",toggleList);
}
function toggleList() {
event.target.classList.toggle("done"); //or this.classList.toggle("done");
}
//Delete list item by clicking on the delete button next to it
var elements = document.getElementsByClassName("btn");
for (var i = 0; i < elements.length; i++){
elements[i].addEventListener("click",removeItem);
}
function removeItem(){
this.parentNode.remove();
}
//3. BONUS: When adding a new list item,it automatically adds the delete button next to it hint: be sure to check if new items are clickable too!
.coolTitle {
text-align: center;
font-family: 'Oswald',Helvetica,sans-serif;
font-size: 40px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: tomato;
text-shadow:
-1px -1px 0 firebrick,-2px -2px 0 firebrick,-3px -3px 0 firebrick,-4px -4px 0 firebrick,-5px -5px 0 firebrick,-6px -6px 0 firebrick,-7px -7px 0 firebrick,-8px -8px 0 firebrick,-30px 20px 40px dimgrey;
}
.done {
text-decoration: line-through;
}
.btn {
display: inline;
border-color: white;
margin-left: 15px;
border-radius: 5px;
}
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul id = "list">
<li>Notebook<button class="btn">Delete</button></li><br>
<li>Jello<button class="btn">Delete</button></li><br>
<li>Spinach<button class="btn">Delete</button></li><br>
<li>Rice<button class="btn">Delete</button></li><br>
<li>Birthday Cake<button class="btn">Delete</button></li><br>
<li>Candles<button class="btn">Delete</button></li><br>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。