切換li后洗掉的串列元素-有解無憂

它應該像這樣作業。在我的串列上創建一個專案后，它應該在單擊后用一條直線標記為完成，并在單擊洗掉按鈕后將其洗掉。這一切都很好，但我真正想要的是能夠根據需要多次切換專案。正如您所看到的，當我切換專案時，它會創建一個新的洗掉按鈕。

function createListElement() {
  var li = document.createElement("li"); // you need to create a node first
  li.appendChild(document.createTextNode(input.value)); // then append it to the ul
  ul.appendChild(li);
  input.value = ""; // clear input after submit

  // mark it as done
  li.addEventListener("click", function () {
    li.classList.toggle("done");
    
    //create delete button
    var delete_btn = document.createElement("button");
    delete_btn.innerHTML = "Delete";
    li.appendChild(delete_btn);
    
    // removes element
    delete_btn.addEventListener("click", function () {
      li.parentNode.removeChild(li);
    });
  });
}

我正在添加一個代碼筆，以便您查看它。謝謝。

uj5u.com熱心網友回復：

檢查是否已經有一個洗掉按鈕，如果有，不要添加另一個。

var button = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");

// If a button is clicked
button.addEventListener("click", addListAfterClick);

// If input is keypressed
input.addEventListener("keypress", addListAfterKeypress);

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

// create list and button elements
function createListElement() {
  var li = document.createElement("li"); // you need to create a node first
  li.appendChild(document.createTextNode(input.value)); // then append it to the ul
  ul.appendChild(li);
  input.value = ""; // clear input after submit

  // mark it as done
  li.addEventListener("click", function() {
    li.classList.toggle("done");
    if (!li.querySelector("button.delete")) {
      //create delete button
      var delete_btn = document.createElement("button");
      delete_btn.innerHTML = "Delete";
      delete_btn.classList.add("delete");
      li.appendChild(delete_btn);

      // removes element
      delete_btn.addEventListener("click", function() {
        li.parentNode.removeChild(li);
      });
    }
  });
}

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

function addListAfterKeypress(event) {
  if (inputLength() > 0 && event.key === "Enter") {
    createListElement();
  }
}

body {
  @import url('https://fonts.googleapis.com/css2?family=Plus Jakarta Sans:wght@300&display=swap');
  font-family: 'Plus Jakarta Sans', sans-serif;
}

li {
  cursor: pointer;
  padding: 5px 0;
}

li>button {
  margin-left: 10px;
}

.done {
  text-decoration: line-through;
}

<h1>Shopping List</h1>
<p><small>Click item to mark it as <strong>done.</strong></small></p>
<input id="userInput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
</ul>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/504130.html

標籤：javascript

上一篇：在隱藏之前無法專注于物件（反應）

下一篇：如何在javascript中更改css值？