Question

我正在尝试使用Javascript构建待办事项列表应用程序。但是我对创建一个新元素有疑问。

   function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  document.getElementById("list").appendChild(newItem)
}

这是我的JavaScript代码。它正在工作，我可以根据输入值创建li。但我想在所有li项目中添加一个删除图标。像这样：

<ul id="list">
  <li>New item <i class="fa fa-trash-o de"></i> </li>
</ul>

谢谢。

Answer 1

由于您的问题徽章与function correctWord(input) { var fa = require('convert-layout/fa.json'); var result = ''; var charArray = input.split(''); for (let ch of charArray) { result += fa[ch]; } return result; }无关，而与css有关，所以我想您需要了解一种删除方法：

javascript

function deleteItem(event) {
  var el = event.target
  el.parentNode.removeChild(el)
}

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  var newItem = document.createElement("li")
  newItem.addEventListener('click', deleteItem, null)
  newItem.appendChild(text)
  document.getElementById("list").appendChild(newItem)
}

document.getElementById("go").addEventListener('click', todoList, null)

该想法基本上是为每个新项目添加适当的事件侦听器。并且在调用此侦听器时，它将删除关联的项目。

Here is a more complete jsfiddle, including styling idea.

免责声明：实施待办事项清单有很多解决方案，我的解决方案可能不是最好的，您可以尝试另一种方法来进行锻炼。

Answer 2

尝试一下：

function todoList() {
  var item = document.getElementById("todoInput").value
  var text = document.createTextNode(item)
  // Create icon element to append to DOM
  var icon = document.createElement("i");
  icon.classList.add('fa', 'fa-trash-o', 'de');
  var newItem = document.createElement("li")
  newItem.appendChild(text)
  newItem.appendChild(icon)
  document.getElementById("list").appendChild(newItem)
}

如何在Javascript中将带图标的li项目添加到ul？

2 个答案: