Question

我的新列表项正在将“删除并完成”按钮仅添加到FIRST新项，而不添加到后续添加的项。输入新项目后，将删除按钮多次添加到新列表项目中。

我尝试执行length-1，但这没有帮助。

var img = new Image();
img.src = 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F1092571024%2F960x0.jpg%3Ffit%3Dscale';
document.body.appendChild(img);

function addTask() {
  var ul = document.getElementById("myTasks");
  var inputTask = document.getElementById("enterTask");
  var li = document.createElement("li")
  li.id = "new";
  //li.setAttribute('id',inputTask.value);
  li.appendChild(document.createTextNode(inputTask.value));
  ul.appendChild(li);
  console.log(li);
  var newList = document.getElementById("new");
  var i = 0;
  for (i = 0; i < newList.length; i++) {
    var removeButton = document.createElement("BUTTON");
    removeButton.innerHTML = "Remove ☒";
    removeButton.className = "byebye";
    myListofTasks[i].appendChild(removeButton);
    removeButton.onclick = deleteItem;
    return;
    //  Creates a completed button
    let completeBtn = document.createElement("button");
    completeBtn.innerHTML = "Completed ★";
    completeBtn.className = "complete";
    completeBtn.onclick = strikeThrough;
    myListofTasks[i].appendChild(completeBtn);
  }
}

//Creates a remove button
const myListofTasks = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myListofTasks.length; i++) {
  let removeButton = document.createElement("BUTTON");
  //var span = document.createElement("SPAN");
  removeButton.innerHTML = "Remove ☒";
  // var removeTxt = document.createTextNode("Remove ☒");
  removeButton.className = "byebye";
  //span.appendChild(removeTxt);
  myListofTasks[i].appendChild(removeButton);
  removeButton.onclick = deleteItem;

  function deleteItem(e) {
    var li = e.target.parentElement;
    var ul = document.getElementById("myTasks");
    ul.removeChild(li);
  }
  
  //  Creates a completed button
  let completeBtn = document.createElement("button");
  completeBtn.innerHTML = "Completed ★";
  completeBtn.className = "complete";
  completeBtn.onclick = strikeThrough;
  myListofTasks[i].appendChild(completeBtn);
}

function strikeThrough(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>Do Laundry</li>
  <li>Do Car</li>
  <li>Email Dad</li>
  <li>Confirm Appt</li>
</ul>
<div id="enterANewTask">
  <input type="text" id="enterTask" name="enterTask" placeholder="Enter a task" value="" />
  <br />
  <input type="button" id="newTask" name="newTask" placeholder="Enter a task" value="Enter" onclick=addTask(); />
  <br />
</div>

我想添加一个新项目，并使该项目具有与已经显示的项目相同的功能。

Answer 1

每次添加新节点时都不需要遍历li列表

function addTask() {
    var ul = document.getElementById("myTasks");
    var inputTask = document.getElementById("enterTask");

    var li = document.createElement("li")
    li.id = "new";
    //li.setAttribute('id',inputTask.value);
    li.appendChild(document.createTextNode(inputTask.value));
    var removeButton = document.createElement("BUTTON");
    removeButton.innerHTML = "Remove &#9746";
    removeButton.className = "byebye";
    removeButton.onclick = deleteItem;
    li.appendChild(removeButton);
    let completeBtn = document.createElement("button");
    completeBtn.innerHTML = "Completed &#9733";
    completeBtn.className = "complete";
    completeBtn.onclick = strikeThrough;
    li.appendChild(completeBtn);
    ul.appendChild(li);
}



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

    removeButton.onclick = deleteItem;


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

    }

    //  Creates a completed button
    let completeBtn = document.createElement("button");
    completeBtn.innerHTML = "Completed &#9733";
    completeBtn.className = "complete";
    completeBtn.onclick = strikeThrough;
    myListofTasks[i].appendChild(completeBtn);
}


function strikeThrough(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>Do Laundry</li>
   <li>Do Car</li>
   <li>Email Dad</li>
   <li>Confirm Appt</li>
</ul>
<div id="enterANewTask">
   <input type="text" id="enterTask" name="enterTask" placeholder="Enter a task" value="" /> <br />
   <input type="button" id="newTask" name="newTask" placeholder="Enter a task" value="Enter" onclick=addTask(); /> <br />
</div>

我想遍历每个新添加的列表项

1 个答案: