如何將 append“刪除按鈕”添加到在 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 createListElement() function 中移動刪除按鈕代碼

請參閱我已附上您的代碼，請參見下文...

 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);

Answer 3

看到我已經使用了這個代碼並附上了它......

 var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); function inputLength() { return input.value.length; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(document.createElement("br")); // Strike-through ul.appendChild(li).addEventListener("click", toggleList); // append and toggle on and off new list items input.value = ""; // Delete button var deleteButton = document.createElement("button"); deleteButton.setAttribute("class", "btn"); deleteButton.appendChild(document.createTextNode("Delete")); ul>li.appendChild(deleteButton).addEventListener("click", removeItem); // append "Delete button" to newly added "li" and delete list item } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress(event) { // event.which works as well if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); // Toggle list items 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 to add the 'line-through' (Strike-through) style function toggleList(event) { event.target.classList.toggle("done"); // or this.classList.toggle("done"); } // Delete the 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 to delete the list item function removeItem() { this.parentNode.remove(); }

 .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> </ul>