使用纯JavaScript删除待办事项列表中的列表项

让我首先说：

我已经看过很多关于解决这个问题的文档 问题

我对JavaScript还是很陌生

问题：删除按钮没有删除相应的内容，这是一个

li

项。对我来说，这意味着问题出现在步骤7

removeToDo.addEventListener

或步骤8

function removeToDoItem

中，但我可能是错的

//2）第二步：构建控制一切的函数
函数onReady（）{
//2.1）创建并存放待办事项列表的当前状态
var toDos=[]；
//3） 第三步：事件监听器——它访问HTML表单元素
var addToDoForm=document.getElementById（'addToDoForm'）；
//2.2）创建/添加列表项的生成函数
函数createNewToDo（）{
//2.3）访问表单中输入的文本
var newToDoText=document.getElementById（'newToDoText'）；
//2.4）将新项添加到toDos数组中
推({
标题：newToDoText.value，
完整：错误
});
//2.5）清除表单输入字段中的文本，因此用户无需
newToDoText.value=''；
renderTheUI（toDos）；
}
//8） 八步：生成删除列表项的函数
函数removeToDoItem（）{
newLi.toDoList.removeChild（newLi）；
renderTheUI（toDos）；
}
//5） 第五步：构建呈现UI的函数
函数renderTheUI（toDos）{
//5.1）访问HTML中的

var toDoList=document.getElementById（'toDoList'）；
//5.9将每个newLi设置为空字符串
toDoList.innerHTML=''；
//5.2）使用forEach（）数组方法在

toDo.forEach（函数（toDo）{
//5.3创建新的

var newLi=document.createElement（'li'）；
setAttribute（'id'，'myLi'）；
//5.4创建新复选框
var checkbox=document.createElement（'input'）；
//6） 第六步：创建移除按钮并设置其属性
var removeToDo=document.createElement（'input'）；
removeToDo.setAttribute（'type'，'button'）；
setAttribute（'value'，'remove'）；
setAttribute（'id'，'removeButton'）；
//5.5将var复选框设置为类型复选框
checkbox.type='checkbox'；
//5.6在HTML中将待办事项分配给newLi
newLi.innerHTML=toDo.title；
//5.7将newLi添加到待办事项列表中
托多利斯特。阿佩奇尔德（纽利）；
//5.8在每个newLi后面附加一个复选框
newLi.appendChild（复选框）；
//6.1将“删除”按钮附加到每个新LI
newLi.appendChild（removeToDo）；
});
}
//3.1）事件侦听器-捕获“提交”，防止页面重新加载，
//并调用函数createNewToDo
AddToForm.addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
createNewToDo（）；
});
//7） 第七步：分配remove按钮事件并调用removeToDoItem（）
removeToDo.addEventListener（'click'，函数（事件）{
removeToDoItem（）；
});
//4） 第四步：添加基于状态控制UI的调用
renderTheUI（toDos）；
}
//1） 第一步：在页面加载时调用函数onReady（）
window.onload=函数（）{
onReady（）
};

待办应用
待办应用
新任务：
添加到做！


您正在将click事件侦听器绑定到removeToDo，而removeToDo仅存在于renderUI函数中。所以你的第七步错了。
您需要在createUI内部添加事件侦听器。用下面的代码替换脚本

//2) SECOND STEP: build the function that will control everything
function onReady() {

  //2.1) creates and houses the current state of to-do list
  var toDos = [];

  //3) THIRD STEP: Event Listener - this accesses the HTML form element
  var addToDoForm = document.getElementById('addToDoForm');

  //2.2) build function that creates/adds list items
  function createNewToDo() {

    //2.3) accesses the text input from the form
    var newToDoText = document.getElementById('newToDoText');

    //2.4) adds new item to the toDos array
    toDos.push({
      title: newToDoText.value,
      complete: false
    });

    //2.5) clears the text in the form input field so user doesn't need to
    newToDoText.value='';

    renderTheUI(toDos);
  }

  //8) EIGHT STEP: build function that deletes list item
  function removeToDoItem(index) {
    console.log(toDos);
    toDos.splice(index, 1);
    console.log(toDos);
    renderTheUI(toDos);
  }

  //5) FIFTH STEP: build the function that will render the UI
  function renderTheUI(toDos) {

    //5.1) Accesses the <ul> in the HTML
    var toDoList = document.getElementById('toDoList');

    //5.9 sets each newLi to an empty string
    toDoList.innerHTML = '';

    //5.2) Use forEach() array method to render each to-do as an <li> in the <ul>
    toDos.forEach(function(toDo, index) {
            //5.3 creates new <li>
      var newLi = document.createElement('li');
      newLi.setAttribute('id', 'myLi');

      //5.4 creates new checkbox
      var checkbox = document.createElement('input');

      //6) SIXTH STEP: create remove button and set its attributes
      var removeToDo = document.createElement('input');
      removeToDo.setAttribute('type', 'button');
      removeToDo.setAttribute('value', 'remove');
      removeToDo.setAttribute('id', 'removeButton');
      removeToDo.setAttribute('class', 'removeButton');
      removeToDo.setAttribute('data-index', index);

      //5.5 set var checkbox as a type checkbox
      checkbox.type = 'checkbox';

      //5.6 assigns to-do item to newLi in the HTML
      newLi.innerHTML = toDo.title;

      //5.7 appends newLi to the to-do list
      toDoList.appendChild(newLi);

      //5.8 appends a checkbox to each newLi
      newLi.appendChild(checkbox);

      //6.1 append the remove button to each newLi
      newLi.appendChild(removeToDo);

      removeToDo.addEventListener('click', function(event) {
        removeToDoItem(index);
      });
    });
  }

  //3.1) Event Listener - catches 'submit', prevents page reload,
  // and invokes the function createNewToDo
  addToDoForm.addEventListener('submit', function(event) {
    event.preventDefault();
    createNewToDo();
  });

  //4) FOURTH STEP: add the call that controls UI based on state
  renderTheUI(toDos);
}
onReady();

//2）第二步：构建控制一切的函数
函数onReady（）{
//2.1）创建并存放待办事项列表的当前状态
var toDos=[]；
//3） 第三步：事件监听器——它访问HTML表单元素
var addToDoForm=document.getElementById（'addToDoForm'）；
//2.2）创建/添加列表项的生成函数
函数createNewToDo（）{
//2.3）访问表单中输入的文本
var newToDoText=document.getElementById（'newToDoText'）；
//2.4）将新项添加到toDos数组中
推({
标题：newToDoText.value，
完整：错误
});
//2.5）清除表单输入字段中的文本，因此用户无需
newToDoText.value=''；
renderTheUI（toDos）；
}
//8） 八步：生成删除列表项的函数
函数removeToDoItem（索引）{
控制台日志（toDos）；
toDos.拼接（索引，1）；
控制台日志（toDos）；
renderTheUI（toDos）；
}
//5） 第五步：构建呈现UI的函数
函数renderTheUI（toDos）{
//5.1）访问HTML中的

var toDoList=document.getElementById（'toDoList'）；
//5.9将每个newLi设置为空字符串
toDoList.innerHTML=''；
//5.2）使用forEach（）数组方法在

forEach（函数（toDo，索引）{
//5.3创建新的

var newLi=document.createElement（'li'）；
setAttribute（'id'，'myLi'）；
//5.4创建新复选框
var checkbox=document.createElement（'input'）；
//6） 第六步：创建移除按钮并设置其属性
var removeToDo=document.createElement（'input'）；
removeToDo.setAttribute（'type'，'button'）；
setAttribute（'value'，'remove'）；
setAttribute（'id'，'removeButton'）；
setAttribute（'class'，'removeButton'）；
removeToDo.setAttribute（'data-index'，index）；
//5.5将var复选框设置为类型复选框
checkbox.type='checkbox'；
//5.6在HTML中将待办事项分配给newLi
newLi.innerHTML=toDo.title；
//5.7将newLi添加到待办事项列表中
托多利斯特。阿佩奇尔德（纽利）；
//5.8在每个newLi后面附加一个复选框
newLi.appendChild（复选框）；
//6.1将“删除”按钮附加到每个新LI
newLi.appendChild（remov
function onReady() {
  var toDos = [];

  var addToDoForm = document.getElementById('addToDoForm');

  function createNewToDo() {

    var newToDoText = document.getElementById('newToDoText');

    toDos.push({
      title: newToDoText.value,
      complete: false
    });

    newToDoText.value='';
    renderTheUI(toDos);
  }

  function removeToDoItem() {
    // the parameters used here should be defined in any of the parent scopes of this function declaration
    // Example: Following variables are accessible inside this function
    // [toDos, renderTheUI] (created in parent scope of this function "onReady")
    // [onReady] (created in parent scope of onReady "window")
    // but newLi is not defined in any of the parent scopes. So, you should pass newLi as parameter to this function

    // newLi passed as parameter will not have a property toDoList
    newLi.toDoList.removeChild(newLi);
    renderTheUI(toDos);
  }

  function renderTheUI(toDos) {
    var toDoList = document.getElementById('toDoList');

    toDoList.innerHTML = '';

    toDos.forEach(function(toDo) {

      var newLi = document.createElement('li');
      newLi.setAttribute('id', 'myLi');

      var checkbox = document.createElement('input');

      var removeToDo = document.createElement('input');
      removeToDo.setAttribute('type', 'button');
      removeToDo.setAttribute('value', 'remove');
      removeToDo.setAttribute('id', 'removeButton');

      checkbox.type = 'checkbox';

      newLi.innerHTML = toDo.title;

      toDoList.appendChild(newLi);

      newLi.appendChild(checkbox);

      newLi.appendChild(removeToDo);
    });
  }


  addToDoForm.addEventListener('submit', function(event) {
    event.preventDefault();
    createNewToDo();
  });

  // Same as above, removeToDo is not accessible here as is it not defined in the parent scope
  removeToDo.addEventListener('click', function(event) {
    // Here you can access the element the click event is triggered on from "this"
    // You want to remove the "li" element that contains this button
    // You can get it from "this.parentElement", you can pass it to removeToDoItem
    removeToDoItem();
  });

  renderTheUI(toDos);
}
window.onload = function() {
  onReady()
};