Question

我正在制作一个待办事项清单，但我很难找到一个解决方案，使用vanilla Javascript，一旦点击它就删除了一个列表项。

将用户输入作为列表项添加是直截了当的部分，但我刚刚意识到这项任务的特定部分比我最初怀疑的更具挑战性。

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

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

这里有任何建议吗？

＆＃13;

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() {

  })

})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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，其id值为li，且class属性值相同。

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

在该按钮上为click事件添加一个事件监听器，该事件监听器将获取该按钮的data-id，并使用该值删除该li元素与{ {1}}点击了按钮的值。
```
data-id
```

Answer 2

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

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

Answer 3

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

＆＃13;

var listItem = document.querySelectorAll('li');

console.log(listItem)

listItem.forEach(function($li){
	$li.addEventListener('click', function() {
  		if($li.classList.contains('completed')) {
      	$li.remove()
      }
  })
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

删除＆＃39;这个＆＃39;使用javascript点击列表元素

3 个答案: