Question

我正在制作带有编辑/删除按钮的待办事项列表，但我似乎无法让按钮正常运行。我主要专注于删除按钮，并认为如果我能得到这个，我可以找出编辑按钮。我在下面粘贴了我的代码;任何建议都有帮助，我对编码还很新！

<!doctype html>
<html>
    <head>
        <title> To Do List</title>

    </head>
    <body>

<h1> To Do List</h1>

<p>
    <input type="text" id="inItemText"> 
    <button id="btnAdd">Add</button>
</p>

<ul id="todoList"></ul>

<script src="todolist.js"></script>

    </body>
</html>

--- ---的JavaScript

function updateStatus() {
  var cbId = this.id.replace("cb_", "");
  var itemText = document.getElementById("item_" + cbId);

  if (this.checked) {
    itemText.className = "checked";
  } else {
    itemText.className = "";
  }
}

function deleteItem(){
    var itemText= document.getElementById("li span2");
    itemText.remove();
}


function editItem() {
  var editId = prompt("What to Edit?")
  var itemText = document.getElementById("item_" + editId);

  if (this.edited) {
    itemText.className = "edited";
  } else {
    itemText.className = "";
  }
}


function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateStatus;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.innerText = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.id = "deleteId_" + totalItems;
  spanDelete.innerText = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.innerText = "EDIT";
  spanEdit.onlick = editItem;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);
  listItem.appendChild(spanDelete);
  listItem.appendChild(spanEdit);


  list.appendChild(listItem);
}

var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();

var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
  var itemText = inItemText.value;

  if (!itemText || itemText === "" || itemText === " ") {
    return false;
  }

  addNewItem(document.getElementById("todoList"), itemText);

  inItemText.focus();
  inItemText.select();

}

尝试从待办事项列表中删除输入

0 个答案: