Question

我在“待办事项列表”应用中删除项目时遇到问题。

我如何删除项目？

我认为我需要在删除按钮的父级上设置display:none;，但是我需要一些帮助。

我如何选择按钮的父项？

我做了一些研究，可能需要使用this.，但是我不知道如何使用它。

添加任务的效果很好。

我的代码：

HTML：

<div class="form">
    <input type="text" id="toDo" placeholder="To do...">
    <button id="addToDo">Add</button>
</div>

<div class="list">
    <div class="toDo">
        <p>Do homework</p>
        <button id="delToDo">Delete</button>
    </div>
    <div class="toDo">
        <p>Do smth</p>
        <button id="delToDo">Delete</button>
    </div>
</div>

JS：

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");

addButton.addEventListener("click", addTask, false);
delBtn.addEventListener("click", delTask, false);

function addTask() {
    const textToDo = document.querySelector("#toDo").value;
    var list = document.querySelector(".list");

    var divToDo = document.createElement("div");
    var p = document.createElement("p");
    var delButton = document.createElement("button");

    divToDo.setAttribute("class", "toDo");
    delButton.setAttribute("id", "delToDo");

    delButton.textContent = "Delete";
    p.textContent = textToDo;


    divToDo.appendChild(p)
    divToDo.appendChild(delButton);

    list.appendChild(divToDo);
}

function delTask() {

}

Answer 1

这应该为您提供正确的方向。 e是从处理程序传递的事件，它有一个属性目标（将是您的按钮），所有元素也都有一个父项（将是div）

 yp, y = y, euler(y,dydt,h)
 if py[1]*y[1] < 0 and y[2] < 0:
      # do what you need to do to list the maximum

但是作为注释，您的ID必须是唯一的

Answer 2

您可以在创建按钮之后并将其添加到div中之前，立即为按钮分配一个onclick事件。处理程序只是一个函数，您可以在其中删除创建的元素。您可以检查下面的代码。

我还用delButton.classList.add("id", "delToDo");替换了您的一行，因为DOM元素的ID应该是唯一的。

const addButton = document.querySelector("#addToDo");
const delBtn = document.querySelector("#delToDo");
addButton.addEventListener("click", addTask, false);

function addTask() {
  const textToDo = document.querySelector("#toDo").value;
  var list = document.querySelector(".list");

  var divToDo = document.createElement("div");
  var p = document.createElement("p");
  var delButton = document.createElement("button");

  divToDo.setAttribute("class", "toDo");
  delButton.classList.add("id", "delToDo");

  delButton.textContent = "Delete";
  p.textContent = textToDo;

  delButton.onclick = function() {
    divToDo.parentNode.removeChild(divToDo);
  }

  divToDo.appendChild(p)
  divToDo.appendChild(delButton);
  list.appendChild(divToDo);
}

.toDo {
  width: 200px;
  height: 80px;
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  text-align: center;
  background-color: yellow;
}

<div class="form">
  <input type="text" id="toDo" placeholder="To do...">
  <button id="addToDo">Add</button>
</div>

<div class="list">

</div>

干杯！

Answer 3

在删除按钮上使用类代替ID。然后将事件侦听器附加到具有list id的元素上，以捕获使按钮中的DOM冒泡的单击事件。将单个侦听器附加到父元素以捕获多个孩子的事件称为"event delegation"。如果要删除元素，则只需将其从DOM中删除。

// Grab the list container and add a listener to it
const list = document.querySelector('.list');
list.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Destructure the clicked element and grab its
  // classList and parentNode
  const { classList, parentNode } = e.target;

  // If the button is a "delete todo" button
  if (classList.contains('delToDo')) {

    // Remove the todo completely from the DOM
    list.removeChild(parentNode);
  }
}

<div class="list">
  <div class="toDo">
    <p>Do homework</p>
    <button class="delToDo">Delete</button>
  </div>
  <div class="toDo">
    <p>Do smth</p>
    <button class="delToDo">Delete</button>
  </div>
</div>

Answer 4

好吧，通过两次使用相同的id属性值，您真的很难受。规则是，每个可以具有id属性的元素都应该具有唯一的id属性值，或者根本没有值。

如果要重用值，则需要使用class属性而不是id属性。

基本思想是（1）编写可监视有人单击按钮的javascript，然后（2）找到要删除的元素，然后（3）删除它。

要监视单击，请设置一个侦听器功能并为每个按钮注册它。现在看来，您知道如何设置侦听器功能并进行注册，但是您只是将功能添加到第一个按钮上。您必须将侦听器明确明确地附加到每个元素（或者从技术上说是一个容器，但这是多余的）。因为仅将侦听器附加到一个按钮，所以它仅适用于该按钮，而不适用于其他按钮。

要解决此问题，请查找所有按钮。这样的事情（一旦您将id更改为class）：

var buttons = document.querySelectorAll('.delTodo');
for(var button of buttons) {
  button.onclick = deleteTask;
}

第二，当某人单击时，您想查找他们单击的内容。碰巧的是，当单击导致调用侦听器函数时，它会获得一个事件参数，在此事件参数中，您可以找到被单击的内容：

function deleteTaskOnClick(event) {
   // Find what was clicked. It is already found for us.
   var theButtonThatWasClicked = event.target;
}

第三，现在您需要删除一个元素。文档对象模块中的每个元素都是具有方法的对象。方法之一是remove()。因此，您只需调用元素的remove方法即可将其分离。

function deleteTaskOnClick(event) {
   var button = event.target;

   // Find the containing element that represents the todo item as a whole
   var todoElement = button.parentElement;

   // Remove the containing element
   todoElement.remove();
}

Answer 5

尝试一下

const addButton = document.querySelector("#addToDo");
const list = document.querySelector(".list");

addButton.addEventListener("click", addTask, false);
list.addEventListener("click", delTask, true);

function addTask() {
    const textToDo = document.querySelector("#toDo").value;
    var list = document.querySelector(".list");

    var divToDo = document.createElement("div");
    var p = document.createElement("p");
    var delButton = document.createElement("button");

    divToDo.setAttribute("class", "toDo");
    delButton.setAttribute("id", "delToDo");

    delButton.textContent = "Delete";
    p.textContent = textToDo;


    divToDo.appendChild(p)
    divToDo.appendChild(delButton);

    list.appendChild(divToDo);
}

function delTask(event) {
    const target = event.target;
    
    if (target.nodeName === 'BUTTON') {
        target.parentNode.remove();
    }
}

<div class="form">
    <input type="text" id="toDo" placeholder="To do...">
    <button id="addToDo">Add</button>
</div>

<div class="list">
    <div class="toDo">
        <p>Do homework</p>
        <button id="delToDo">Delete</button>
    </div>
    <div class="toDo">
        <p>Do smth</p>
        <button id="delToDo">Delete</button>
    </div>
</div>

一些观察，因为要向DOM添加新节点，所以需要使用事件委托策略，以使新元素可以通过事件访问。如果您喜欢视频，可以在本文中阅读有关主题http://javascript.info/event-delegation的信息，第15页的课程https://javascript30.com/标题为LocalStorage and Event Representative可以很清楚地说明主题

如何删除div中的待办事项清单？

5 个答案: