javascript - 单击按钮时我的列表项不会删除

Question

//Creates a remove button
var myListofTasks  = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myListofTasks.length; i++) {
  var span = document.createElement("SPAN");
  span.innerHTML = "Remove &#9746";
 // var removeTxt = document.createTextNode("Remove &#9746");
  span.className = "byebye";
  //span.appendChild(removeTxt);
  myListofTasks [i].appendChild(span);

  span.onclick = deleteItem;
}

function deleteItem(e) {
   var li = e.target.parentElement;
   var ul = document.getElementById("myTasks");
   ul.removeChild(li);

}



// Creates a completed button
var creatingFinishBtn = document.getElementsByTagName("LI");
var x;
for (x = 0; x < creatingFinishBtn.length; x++) {
  var button = document.createElement("BUTTON");
  button.innerHTML = "Completed &#9733";
  button.className = "complete";
  creatingFinishBtn[x].appendChild(button);


  button.onclick = highlightItem;
button.onclick.strikeThrough;

}
function strikeThrough(){

    var list = document.querySelector('button');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('completed');
  }
}, false);
}


function highlightItem(e) {
   var li = e.target.parentElement;
   var ul = document.getElementById("myTasks");
   e.target.style.backgroundColor ="red";


}

我的CSS包含.completed和删除线的文本装饰样式。

当单击已完成按钮时 - 我希望我的列表项被删除。当我单击时，除了已完成的按钮按预期改变颜色外，什么也没有发生。

Answer 1

我稍微重构了你的代码。为了删除线，您可以使用内置的 css 函数 text-decoration 和 line-through。

//Creates a remove button
const myListofTasks  = document.getElementsByTagName("li");
const taskLen = myListofTasks.length;
var i = 0;

for (i = 0; i < taskLen; i++) {
  // Append remove button
  let deleteBtn = document.createElement("button");
  deleteBtn.innerHTML = "Remove &#9746";
  deleteBtn.className = "byebye";
  deleteBtn.onclick = deleteItem;
  myListofTasks[i].appendChild(deleteBtn);
  
  // append complete button
  let completeBtn = document.createElement("button");
  completeBtn.innerHTML = "Completed &#9733";
  completeBtn.className = "complete";
  completeBtn.onclick = completeItem;
  myListofTasks[i].appendChild(completeBtn);
}

function deleteItem(e) {
   var li = e.target.parentElement;
   var ul = document.getElementById("myTasks");
   ul.removeChild(li);
}

function completeItem(e) {
   var li = e.target.parentElement;
   var ul = document.getElementById("myTasks");
   e.target.style.backgroundColor = "red";
   e.target.parentElement.style.setProperty("text-decoration", "line-through");
}

<ul id="myTasks">
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
  <li>Item #6</li>
  <li>Item #7</li>
  <li>Item #8</li>
  <li>Item #9</li>
</ul>