removeChild和addEventListener的Javascript DOM操作错误_Javascript_Dom_Addeventlistener_Removechild

removeChild和addEventListener的Javascript DOM操作错误

javascript dom

removeChild和addEventListener的Javascript DOM操作错误,javascript,dom,addeventlistener,removechild,Javascript,Dom,Addeventlistener,Removechild,我基本上是在建立一个非常简单的列表。在顶部的输入字段中写入内容，单击按钮，它将显示在下面的ul中我的控制台有两个错误，我不确定我做错了什么首先，在第12行，此事件侦听器： deleteBtn.addEventListener('click', removeItem); 错误是“无法读取null的属性'addEventListener'，我相信这是因为deleteBtn在加载时不在页面上，在向列表中添加项时，它会使用li添加到DOM中第二，第40行： selectedItem.remove

我基本上是在建立一个非常简单的列表。在顶部的输入字段中写入内容，单击按钮，它将显示在下面的ul中

我的控制台有两个错误，我不确定我做错了什么

首先，在第12行，此事件侦听器：

deleteBtn.addEventListener('click', removeItem);

错误是“无法读取null的属性'addEventListener'，我相信这是因为deleteBtn在加载时不在页面上，在向列表中添加项时，它会使用li添加到DOM中

第二，第40行：

selectedItem.removeChild(checkMark);

错误为“未能在“节点”上执行“removeChild”：要删除的节点不是此节点的子节点。”

以下是我的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bootstrap Crash Course</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
        integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
        crossorigin="anonymous" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
        crossorigin="anonymous">

  <style type="text/css">
    #myButton {
      cursor: pointer;
    }

    .input-group {
      margin: 15px 0;
    }

    .fa-times-circle-o {
      font-size: 24px;
      cursor: pointer;
    }

    .fa-check-circle {
      font-size: 24px;
    }

  </style>
</head>
<body>

<div class="container">

  <div class="input-group">
    <input type="text" class="rounded form-control" id="myInput" />
    <span id="myButton" class="input-group-addon">Click</span>
  </div>

  <ul class="list-group" id="myOutput">

  </ul>

</div> <!-- .containter -->




  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
          integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
          integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
          crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>

//Code from app.js

let myButton = document.getElementById('myButton');
let myOutput = document.getElementById('myOutput');
let myInput = document.getElementById('myInput');
let listGroupItems = document.querySelectorAll('.list-group-item');
let deleteBtn = document.getElementById('deleteBtn');

setUpEventListeners();

function setUpEventListeners() {
  myButton.addEventListener('click', addItem);
  myOutput.addEventListener('click', toggleItem);
  deleteBtn.addEventListener('click', removeItem);
}

function addItem() {
  if (myInput.value === '') {
    console.log('Field is empty!');
  } else {
    let li = document.createElement('li');
    let inputValue = document.createTextNode(myInput.value);

    li.innerHTML = '<i class="fa fa-times-circle-o float-right" aria-hidden="true" id="deleteBtn"></i>';
    li.className = 'list-group-item';
    myOutput.appendChild(li);
    li.appendChild(inputValue);
  }
  myInput.value = '';
}

function toggleItem(e) {
  let selectedItem = e.target;
  let checkMark = document.createElement('i');
  checkMark.classList.add('fa', 'fa-check-circle', 'float-left');

  console.log(selectedItem);

  if (selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
    selectedItem.classList.remove('bg-success');
    selectedItem.classList.remove('text-white');
    //listGroupItems.removeChild(checkMark);
  } else if (!selectedItem.classList.contains('bg-success') && selectedItem.classList.contains('list-group-item')) {
    selectedItem.classList.add('bg-success');
    selectedItem.classList.add('text-white');
    selectedItem.appendChild(checkMark);
  }
}

function removeItem() {
  e.target.parentElement.remove();
}


自助速成班
#我的按钮{
光标：指针；
}
.输入组{
利润率：15px0；
}
.fa-times-circle-o{
字体大小：24px；
光标：指针；
}
.fa检查圈{
字体大小：24px；
}
点击


//来自app.js的代码
让myButton=document.getElementById（'myButton'）；
让myOutput=document.getElementById（'myOutput'）；
让myInput=document.getElementById（'myInput'）；
让listGroupItems=document.querySelectorAll（'.list group item'）；
让deleteBtn=document.getElementById（'deleteBtn'）；
setUpEventListeners（）；
函数setUpEventListeners（）{
myButton.addEventListener（'单击'，添加项）；
myOutput.addEventListener（'click'，toggleItem）；
deleteBtn.addEventListener（'单击'，删除项）；
}
函数addItem（）{
如果（myInput.value==''）{
log（'字段为空！'）；
}否则{
设li=document.createElement（'li'）；
让inputValue=document.createTextNode（myInput.value）；
li.innerHTML=''；
li.className='列表组项'；
我的孩子（李）；
li.追加子项（输入值）；
}
myInput.value=''；
}
功能切换项（e）{
让selectedItem=e.target；
让checkMark=document.createElement（'i'）；
选中标记。类列表。添加（'fa'，'fa check circle'，'float left'）；
console.log（selectedItem）；
if（selectedItem.classList.contains（'bg-success'）&&selectedItem.classList.contains（'list-group-item'））{
选择editem.classList.remove（'bg-success'）；
选择editem.classList.remove（'text-white'）；
//listGroupItems.removeChild（复选标记）；
}否则如果（！selectedItem.classList.contains（'bg-success'）&&selectedItem.classList.contains（'list-group-item'））{
选择editem.classList.add（'bg-success'）；
选择editem.classList.add（'text-white'）；
选择EdItem.appendChild（选中标记）；
}
}
函数removietem（）{
e、 target.parentElement.remove（）；
}

deleteBtn变量未定义，由于页面加载中至少没有一个id为deleteBtn的项目。

在创建之前，不要将事件添加到

deleteBtn

，而是在创建按钮时使用

onclick

添加内联事件，调用函数

removietem

，并使用

this

对于第二个问题，

listGroupItems

是一个数组。所以数组中没有

removeChild

方法

要解决第二个问题，请从

childNodes

集合中获取图标的索引。然后使用该索引删除此特定子节点

让myButton=document.getElementById（'myButton'）；
让myOutput=document.getElementById（'myOutput'）；
让myInput=document.getElementById（'myInput'）；
让listGroupItems=document.querySelectorAll（'.list group item'）；
setUpEventListeners（）；
函数setUpEventListeners（）{
myButton.addEventListener（'单击'，添加项）；
myOutput.addEventListener（'click'，toggleItem）；
}
函数addItem（）{
如果（myInput.value==''）{
log（'字段为空！'）；
}否则{
设li=document.createElement（'li'）；
让inputValue=document.createTextNode（myInput.value）；
//在此处添加onclick进行了更改
li.innerHTML=''；
li.className='列表组项'；
我的孩子（李）；
li.追加子项（输入值）；
}
myInput.value=''；
}
功能切换项（e）{
让selectedItem=e.target；
if（selectedItem.classList.contains（'bg-success'）&&selectedItem.classList.contains（'list-group-item'））{
选择editem.classList.remove（'bg-success'）；
选择editem.classList.remove（'text-white'）；
var-iconIndex=''；
//使用其类从childNodes获取具有特定类的图标的索引
对于（变量i=0；i


#我的按钮{
光标：指针；
}
.输入组{
利润率：15px0；
}
.fa-times-circle-o{
字体大小：24px；
光标：指针；
}
.fa检查圈{
字体大小：24px；
}

点击


要删除元素使用方法，签名为：
parentOfTarget.removeChild(target)

在下面的演示中，和用于将元素创建和插入合并到DOM中。顺便说一句，您不能为多次创建的元素分配id。ID是唯一的，因此删除了#deleteBtn
。无论如何，按钮上不需要id
有大量的类在运行和关闭，所以我将它们放在数组中，然后切换到