如何使用 javascript 删除列表元素

Question

我正在制作一个简单的 ToDo 应用程序来学习 Javascript 我正在尝试实现这个删除线功能，如果用户单击“完成”按钮，待办事项（文本）就会被删除线。

我尝试了一些方法，但 none 似乎有效，它们也会影响我的完成和删除按钮

function addToDo() {

  var Input = document.getElementById("enter").value // gets input from input box
  var list = document.getElementById('todos'); // gets the list div from html doc
  var entry = document.createElement('li'); // creats a new list element 
  entry.setAttribute('id', 'ToDo') // adds id to list element 

  var deleteTodo = document.createElement("button"); // creates a button
  var doneTodo = document.createElement("button");
  deleteTodo.setAttribute('id', 'deletetodobtn')
  doneTodo.setAttribute('id', 'deletetodobtn')
  deleteTodo.innerHTML = "Delete " // button text  
  doneTodo.innerHTML = "Done"
  doneTodo.onclick = function doneTodo() { // function to delete list element (todo) 
    entry.innerText = entry.textContent.strike()
  }

  deleteTodo.onclick = function deleteTodo() { // function to delete list element (todo) 
    entry.remove()
  }

  entry.textContent = Input // adds  input text to list element 
  list.appendChild(entry); // adds element to list 
  entry.appendChild(deleteTodo); // appends the button 
  entry.appendChild(doneTodo);
  document.getElementById("enter").value = ""; // reinitialises text field with ""
}

document.addEventListener("keypress", function onEvent(event) { // if enter is clicked todo is added
  if (event.key === "Enter")
    addToDo()
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
body {
  background: #fd746c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ff9068, #fd746c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 5vw;
  text-align: center;
  margin-top: -4%;
  -webkit-text-stroke: 2px black;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 15vw;
    margin-top: 0%;
  }
}

ul {
  display: table;
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: white;
}

#enter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  border-radius: 10px;
  width: 30em;
}

@media only screen and (max-width: 600px) {
  #enter {
    width: 15em;
  }
}

#deletetodobtn {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #ff4242;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#deletetodobtn:hover {
  background-color: #4d0e0e;
  transition: background-color 0.2s ease-in;
}

#add {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 20px;
  margin-top: 10px;
  background-color: #0d0f29;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

#add:hover {
  background-color: #4049c5;
  transition: background-color 0.2s ease-in;
}

#center {
  text-align: center;
  margin-top: 10%;
}

.strike {
  /* strikethrough done todo */
  text-decoration: 'line-through'
}

<body>
  <center>
    <div id="center">
      <h1>ToDo List</h1>
      <input type="text" id="enter" placeholder="Enter ToDo ...">

      <button onclick="addToDo()" id="add"> Add ToDo </button>

      <ul id="todos">
        <ul>
    </div>
  </center>
  
  <script src="script.js" defer></script>
</body>

我尝试通过几种方式解决问题：

1.将 CSS class 添加到待办事项列表元素中，该元素在单击按钮时带有删除线

doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
        entry.classList.add('strike');
  }

.strike{  /* strikethrough done todo */
    text-decoration: 'line-through'
}

这没有任何效果

2。使用 strike() 方法

我尝试了一些变化：

1. innerHTML

 doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
    entry.innerHTML=entry.textContent.strike()
  }

这会产生： 2。 innerText

 doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
        entry.innerText=entry.textContent.strike()
      }

产生这个：

是否可以在不影响我的完成或删除按钮的情况下实现此功能？

Answer 1

只需添加您的 class 而不是尝试修改文本。此外，CSS 属性值通常不是带引号的字符串。自定义字体系列名称和 pseudo-element 内容除外。

function addToDo() {

  var Input = document.getElementById("enter").value // gets input from input box
  var list = document.getElementById('todos'); // gets the list div from html doc
  var entry = document.createElement('li'); // creats a new list element 
  entry.setAttribute('id', 'ToDo') // adds id to list element 

  var deleteTodo = document.createElement("button"); // creates a button
  var doneTodo = document.createElement("button");
  deleteTodo.setAttribute('id', 'deletetodobtn')
  doneTodo.setAttribute('id', 'deletetodobtn')
  deleteTodo.innerHTML = "Delete " // button text  
  doneTodo.innerHTML = "Done"

  doneTodo.onclick = function doneTodo() { // function to delete list element (todo) 
    entry.classList.toggle('strike'); // or just classList.add
  }

  deleteTodo.onclick = function deleteTodo() { // function to delete list element (todo) 
    entry.remove()
  }

  entry.textContent = Input // adds  input text to list element 
  list.appendChild(entry); // adds element to list 
  entry.appendChild(deleteTodo); // appends the button 
  entry.appendChild(doneTodo);
  document.getElementById("enter").value = ""; // reinitialises text field with ""
}

document.addEventListener("keypress", function onEvent(event) { // if enter is clicked todo is added
  if (event.key === "Enter")
    addToDo()
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');
body {
  background: #fd746c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ff9068, #fd746c);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 5vw;
  text-align: center;
  margin-top: -4%;
  -webkit-text-stroke: 2px black;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 15vw;
    margin-top: 0%;
  }
}

ul {
  display: table;
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: white;
}

#enter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  border-radius: 10px;
  width: 30em;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #enter {
    width: 15em;
  }
}

#deletetodobtn {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #ff4242;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#deletetodobtn:hover {
  background-color: #4d0e0e;
  transition: background-color 0.2s ease-in;
}

#add {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 20px;
  margin-top: 10px;
  background-color: #0d0f29;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

#add:hover {
  background-color: #4049c5;
  transition: background-color 0.2s ease-in;
}

#center {
  text-align: center;
  margin-top: 10%;
}

.strike {
  /* strikethrough done todo */
  text-decoration: line-through;
}

<body>
  <div id="center">
    <h1>ToDo List</h1>
    <input type="text" id="enter" placeholder="Enter ToDo ...">
    <button onclick="addToDo()" id="add"> Add ToDo </button>
    <ul id="todos"></ul>
  </div>

  <script src="script.js" defer></script>
</body>

如何使用 javascript 删除列表元素

How to strikethrough a list element using javascript

javascript

innerhtml

html-lists

innertext

strikethrough