使用 javascript 删除“this”点击列表元素答案

【问题标题】：removing 'this' clicked list element using javascript使用 javascript 删除“this”点击列表元素
【发布时间】：2018-02-18 08:49:18
【问题描述】：

我正在处理待办事项列表，但我正在努力寻找解决方案，使用原生 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>

【问题讨论】：

id 为add、task 和completed 的元素在哪里。
真的很抱歉，这是一个复制+粘贴错误。并且已完成的任务 id 被分配到另一个

标签： javascript html css

【解决方案1】：

您可以使用自定义属性从按钮中识别所选项目的 Id。数据属性对您的情况很有用。

按照以下步骤操作：

当您为任务创建li 元素时。使用计数器分配唯一的 id 属性，例如id = 1、2、3等
```
var list = document.createElement("li");
list.setAttribute('id', (value-of-last-li-id) + 1);
```

类似地，在创建button 元素时给它一个数据属性data-id，具有相同的 li id 值和共同的class 属性值。

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

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

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);
}

【讨论】：

【解决方案2】：

不要给按钮 id。您将有重复的 ID。而是在创建按钮的同时添加事件侦听器。这样，您还可以立即访问 li。

... 
var button = document.createElement("button");
button.addEventListener("click", function() {
    list.parentNode.removeChild(list);
});
...

【讨论】：

【解决方案3】：

这可能会帮助您如何remove 被点击的元素。

var listItem = document.querySelectorAll('li');

console.log(listItem)

listItem.forEach(function($li){
	$li.addEventListener('click', function() {
  		if($li.classList.contains('completed')) {
      	$li.remove()
      }
  })
})

ul{
  list-style: none;
}
ul>li{
  background: #d2d2d2;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}
ul>li.completed{
  background: red;
}

<ul>
  <li>Task 1</li>
  <li>Task 2</li>
  <li class="completed">Task 3</li>
  <li>Task 4</li>
  <li class="completed">Task 5</li>
</ul>

【讨论】：