如何将 "delete button" 附加到在 JS 中新创建的每个列表项？

Question

使用 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"));

Answer 1

您好，您只需将删除按钮代码移入 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>

Answer 2

这是我基于上述内容使用的代码 - 注意到其中一些代码似乎并不是获得预期结果所必需的。像这样因为看起来更简单直接：

var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

    // Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.setAttribute("class", "btn")
    deleteButton.appendChild(document.createTextNode(" Remove "));
    ul>li.appendChild(deleteButton).addEventListener("click", removeItem);

    // Strike-through
    ul.appendChild(li).addEventListener("click", toggleList);
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function removeItem() {
    this.parentNode.remove();
}```

function toggleList () {
    this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);

如何将 "delete button" 附加到在 JS 中新创建的每个列表项？

How to append "delete button" to EVERY list item that is newly created in JS?

javascript

dom

event-handling

dom-events

dom-manipulation