Question

我真的尝试了所有内容，几乎是JS中的每个功能。但是添加后，我无法从待办事项列表中删除该列表项。我尝试添加事件监听器，onclick =“等，但没有任何效果。有人可以看看我的代码，然后告诉我我在做什么错。谢谢，非常感谢您的帮助。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>

    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

    <script src="script.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet href="style.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <meta charset="UTF-8">
    <title>To-Do-List</title>
</head>
<body>
    <div class="container">
    <div id="header">
        <h1>My To Do List</h1>
    </div>
        <form autocomplete="off">
       <input type="text" id="task" placeholder="Title...">
   </form>
       <button id="addTask">Add</button>
    </div>

    <br><br>

    <div id="tasks">
        <ul id="myUL">

        </ul>
    </div>
</div>
</div>
 <script>

var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);
function boxChecked(event){
    const element = event.target;
    if(element.type === "close"){
      delete element;
    }
}

 </script>
</body>
</html>

JS：

$(document).ready(function(){




document.getElementById('addTask').addEventListener("click", function(){
var task = document.getElementById('task').value;

if(task == ""){
    alert("You Must Enter A Value!");
}else{
document.getElementById('myUL').innerHTML += '<li>' + task + '</li>' + '<button class="close" >&#10007</button>' + '<br><br>' + '<button class="check" >&#10003;</button>' + '<br><br>';
}

var button = document.querySelectorAll('.close');
for(var i = 0; i < button.length;i++){
button[i].addEventListener("click", function(){
this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this);
});
}

var check = document.querySelectorAll('.check');
for(var i = 0; i < check.length;i++){
check[i].addEventListener("click", function(){
this.parentNode.style.textDecoration = "line-through";
});
}

 });

});

Answer 1

您的 .querySelectorAll() 仅需要定位.close而不是close。除此之外，您可能希望使用.parentNode来定位关闭按钮的父项（项目本身）。请注意，您可能不想隐藏它，而实际上只是同时删除 <li>和关闭图标，以便在删除项目后可以添加更多项目）。这可以通过以下方式完成：

this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this);

并且可以在以下方式工作：

var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);

function boxChecked(event) {
  const element = event.target;
  if (element.type === "close") {
    delete element;
  }
}

$(document).ready(function() {
  document.getElementById('addTask').addEventListener("click", function() {
    var task = document.getElementById('task').value;

    if (task == "") {
      alert("You Must Enter A Value!");
    } else {
      document.getElementById('myUL').innerHTML += '<li>' + task + '</li>' + '<button class="close" >&#10007</button>' + '<br><br>';
    }

    var button = document.querySelectorAll('.close');
    for (var i = 0; i < button.length; i++) {
      button[i].addEventListener("click", function() {
        this.parentNode.removeChild(this.previousSibling);
        this.parentNode.removeChild(this);
      });
    }

  });
});

<!DOCTYPE html>
<html lang="en">

<head>

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

  <script src="script.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <meta charset="UTF-8">
  <title>To-Do-List</title>
</head>

<body>
  <div class="container">
    <div id="header">
      <h1>My To Do List</h1>
    </div>
    <form autocomplete="off">
      <input type="text" id="task" placeholder="Title...">
    </form>
    <button id="addTask">Add</button>
  </div>

  <br><br>

  <div id="tasks">
    <ul id="myUL">

    </ul>
  </div>
</body>

</html>

还请注意，您的样式表缺少结尾"，并且还有两个结尾</div>与上面的代码中的任何内容都不匹配。

Answer 2

在将侦听器附加到内部元素时，请勿尝试串联innerHTML字符串，否则侦听器将丢失。而是用appendChild正确地附加元素。

delete element实际上不会做任何事情，因为element是变量，而不是对象的属性-尝试使用.remove()来删除li（并将按钮放在li内，以使HTML有效）。

var list = document.getElementById('myUL');
list.addEventListener("click", boxChecked);

function boxChecked(event) {
  const element = event.target;
  if (element.className === "close") {
    element.parentElement.remove();
  }
}

document.getElementById('addTask').addEventListener("click", function() {
  var task = document.getElementById('task').value;

  if (task === "") return alert("You Must Enter A Value!");
  const li = list.appendChild(document.createElement('li'));
  li.textContent = task;
  const button = li.appendChild(document.createElement('button'));
  button.className = 'close';
  button.textContent = '✗';
});

.close {
  position: absolute;
  left: 150px;
}

<div class="container">
  <div id="header">
    <h1>My To Do List</h1>
  </div>
  <form autocomplete="off">
    <input type="text" id="task" placeholder="Title...">
  </form>
  <button id="addTask">Add</button>
</div>

<br><br>

<div id="tasks">
  <ul id="myUL">

  </ul>
</div>

添加待办事项列表项后如何删除

2 个答案: