Question

我正在创建一个任务列表，并试图让我的删除按钮实际删除它附加到的任务。对这一切仍然很新，感谢任何帮助。

这是我的HTML：

<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task" placeholder="Enter new task.">
<button id="submit">Create</button>
</div>
<section id="list">
</section>
</body>

到目前为止，这是我的javascript：

// Creating a new task
const button = document.getElementById("submit");

button.addEventListener("click", () => {
  var taskInput = document.getElementById("task").value;
  // Creating the text for list item.
  if (taskInput === "") {
    // Prevents empty list item.
    alert("You have to type a task!");
  } else {
    var listItem = document.createElement("li"); // Create li element.
    var task = document.createElement("p"); // Create p element.
    var text = document.createTextNode(taskInput); // Create text for list item.
    task.appendChild(text); // Append text to p element.
    listItem.appendChild(task); // Append p to list item.
  }


  // Create a delete button
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  deleteButton.setAttribute("class", "btn delete");



  //Create an edit button
  var editButton = document.createElement("button");
  editButton.innerHTML = "Edit";
  editButton.setAttribute("class", "btn edit");
  editButton.setAttribute("onclick", "editThis(this)");

  //Create button section
  var buttons = document.createElement("div");
  buttons.setAttribute("class", "buttons");
  buttons.appendChild(editButton);
  buttons.appendChild(deleteButton);
  listItem.appendChild(buttons);

  //Add new list item to list
  var list = document.getElementById("list");
  list.appendChild(listItem);
});

// Delete List Item
const removeItem = document.getElementsByClassName('delete');
removeItem.addEventListener("click", "removeThis(removeItem)");

function removeThis(removeItem) {
  var parent = removeItem.parentElement.parentElement;
  parent.parentElement.removeChild(parent);
}

再次感谢任何建议。

Answer 1

在问题的代码中未定义

editThis。 .addEventListener()的第二个参数应该是函数，而不是字符串。 removeItem也是元素的集合，而不是单个元素

for (let i = 0; i < removeItem.length; i++) {
  removeItem[i].addEventListener("click", function() {
    removeThis(this)
  });
}

Answer 2

最好在创建按钮时附加监听器。请看下面的代码

// Creating a new task
const button = document.getElementById("submit");

button.addEventListener("click", () => {
  var taskInput = document.getElementById("task").value;
  // Creating the text for list item.
  if (taskInput === "") {
    // Prevents empty list item.
    alert("You have to type a task!");
  } else {
    var listItem = document.createElement("li"); // Create li element.
    var task = document.createElement("p"); // Create p element.
    var text = document.createTextNode(taskInput); // Create text for list item.
    task.appendChild(text); // Append text to p element.
    listItem.appendChild(task); // Append p to list item.
  }


  // Create a delete button
  var deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  deleteButton.setAttribute("class", "btn delete");



  //Create an edit button
  var editButton = document.createElement("button");
  editButton.innerHTML = "Edit";
  editButton.setAttribute("class", "btn edit");
  editButton.setAttribute("onclick", "editThis(this)");

  //Create button section
  var buttons = document.createElement("div");
  buttons.setAttribute("class", "buttons");
  buttons.appendChild(editButton);
  buttons.appendChild(deleteButton);
  listItem.appendChild(buttons);

    deleteButton.addEventListener('click', function () {
    console.log(this);
    console.log(this.parentElement.parentElement);
    var parent = this.parentElement.parentElement;
    parent.parentElement.removeChild(parent);
  });
  //Add new list item to list
  var list = document.getElementById("list");
  list.appendChild(listItem);
});

使用纯Javascript

2 个答案: