Question

我正在尝试制作一个简单的待办事项清单。我已经设法创建了按钮，但是单击时无法将其删除。在控制台中显示：

li未定义

let getText = document.querySelector(".text");
let getUl = document.querySelector(".list");
let dBtn = document.createElement("button");

function addItem() {
  let newLi = document.createElement("li");
  newLi.innerHTML = getText.value;
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value = "";
}

dBtn.appendChild(document.createTextNode("X"));

dBtn.addEventListener("click", function() {
  li.classList.add("delete");
})

* {
  padding: 0;
  margin: 0;
  text-align: center;
}

.button-add {
  height: 19px;
  width: 40px;
  border-radius: 5px;
}

.delete {
  display: none;
}

.text {
  border-radius: 5px;
}

<h1>to-do list</h1>
<input type="text" class="text" placeholder="Item to add ...">
<button type="button" class="button-add" onclick="addItem()">Add</button><br>
<ul class="list">

</ul>

Answer 1

将类delete添加到li不会在您单击时删除该项目。

当前代码仅将按钮添加到创建的第一个li中。我相信您想为每个li添加按钮。如果是这样，则在创建li时必须添加按钮功能。

将点击处理程序功能代码替换为：

this.parentNode.remove();

这将删除当前的li。

let getText = document.querySelector(".text");
let getUl = document.querySelector(".list");

function addItem (){
  let newLi = document.createElement("li");
  let dBtn = document.createElement("button");
  dBtn.addEventListener("click", removeLi);
  newLi.innerHTML=getText.value;
  dBtn.appendChild(document.createTextNode("X"));
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value="";
}

function removeLi()  {
  this.parentNode.remove();
}

* {
  padding: 0;
  margin: 0;
  text-align: center;
}

.button-add {
  height: 19px;
  width: 40px;
  border-radius: 5px;
}

.delete{
  display: none;
}

.text {
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
  </head>
  <body>
    <h1>to-do list</h1>
    <input type="text" class="text" placeholder="Item to add ...">
    <button type="button" class="button-add" onclick="addItem()">Add</button><br>
    <ul class="list">

    </ul>

    <script src="main.js"></script>
  </body>
</html>

Answer 2

因为未定义addItem（）。您是在元素后声明它。

尝试从按钮e中删除onclick =“”，将其赋予js中的onclick

像这样替换function addItem(){ .. }：

document.getElementsByClassName('button-add')[0].onclick = function (){
  let newLi = document.createElement("li");
  newLi.innerHTML=getText.value;
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value="";
}

删除

dBtn.addEventListener("click",function ()  {
  this.parentNode.classList.add("delete");
})

https://jsfiddle.net/dj1eya95/3/

我无法使按钮向新创建的<li>元素添加类

2 个答案: