javascript - 使用 javascript 删除 'this' 单击的列表元素

Question

我正在处理一个待办事项列表，但我正在努力寻找一种解决方案，使用 vanilla Javascript 在单击列表项后将其删除。

将用户输入附加为列表项是最简单的部分，但我刚刚意识到任务的这个特定部分比我最初怀疑的更具挑战性。

这是我的第一个 JS 元素。对于附加的每个列表项，还会在该列表项中添加一个按钮元素作为子元素。

想法是，当用户单击此按钮时，它将从无序列表中删除该特定列表项。

这里有什么建议吗？

document.getElementById("add").addEventListener("click", function() {

  var taskinput = document.getElementById("task").value;

  if (taskinput) {

    var tasktext = document.createTextNode(taskinput);
    var list = document.createElement("li");
    list.appendChild(tasktext);
    var button = document.createElement("button");
    button.setAttribute("id", "completed");
    button.innerHTML = "completed";
    list.appendChild(button);
    document.getElementById("task-to-do").appendChild(list);
    document.getElementById("task").value = "";
  } else {
    alert("Please enter a task");
  }

  document.getElementById("completed").addEventListener("click", function() {

  })

})

ul {
  list-style: none;
}

ul li {
  position: relative;
  margin: auto;
  width: 80%;
  padding: 2% 2% 2% 2%;
  margin-bottom: 10px;
  color: white;
  border: 1px solid white;
  border-radius: 3px;
  background-color: #6363B6;
}

li button {
  display: block;
  width: auto;
  height: auto;
  padding: 1%;
  clear: both;
  float: right;
  background-color: #6363B6;
}

<div id="incomplete-tasks">
  <h4>INCOMPLETE TASKS</h4>
  <ul id="task-to-do">

  </ul>
</div>

Answer 1

您可以使用自定义属性从按钮中识别所选元素的 ID。数据属性将对您有用。

按照以下步骤操作:

1. 当您为任务创建 li 元素时。使用计数器分配一个唯一的 id 属性，例如id = 1、2、3 等

   var list = document.createElement("li");
   list.setAttribute('id', (value-of-last-li-id) + 1);
   

2. 同样在创建 button 元素时给它一个数据属性 data-id 和 li 相同的 id 值和公共(public) class 属性值(value)。

   var button = document.createElement("button");
   button.setAttribute('data-id', (value-of-last-li-id) + 1);
   button.setAttribute('class', 'delete-btn');
   

3. 为该按钮上的 click 事件添加事件监听器，这将获取按钮的 data-id 并使用该值您可以删除 li 元素具有与单击的按钮相同的 data-id 值。

   var delete_btns = document.getElementsByClassName('delete-btn');
   
   var delete_task = function() {
       var li_id = this.getAttribute('data-id');
       document.getElementById(li_id).remove();
   }
   
   for (var i = 0; i < delete_btns.length; i++) {
       delete_btns[i].addEventListener('click', delete_task);
   }