How to add an iconed li item to ul in Javascript?

Question

I'm trying to build a to-do list application with Javascript. But I have a question about creating a new element.

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

It's my javascript code. It's working, I can create a li from an input value. But I want to include a delete icon all li items. like this:

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

Thanks.

does that not work when you load the fontawesome css "library"? — Jaromanda X, Apr 12 '19 at 08:37
What is your issue? Are you trying to delete the element, or are you trying to print the way of deleting an element? And what have you tried? — Ulysse BN, Apr 12 '19 at 08:38
here is another example about todo you can check it https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo — errorau, Apr 12 '19 at 08:39
you can add a class name - https://stackoverflow.com/a/507157/2845389 — Kaushik, Apr 12 '19 at 08:39
you say icon is working ... but in the question `But I want to include a delete icon all li items. like this; ` ... so ... what is the question? — Jaromanda X, Apr 12 '19 at 08:44

Ulysse BN · Answer 1 · 2019-04-12T08:55:33.377

Since your question badge is not about css but javascript, I guessed you needed to know a way to do deletion:

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)

<input type="text" id="todoInput">
<button id="go">add todo</button>
<ul id="list">

</ul>

The idea is basically to add an appropriate event listener to every new item. And when this listener is called, it deletes associated item.

Here is a more complete jsfiddle, including styling idea.

DISCLAIMER: there are tons of solution to implement a todo list, mine may not be the best, and you could exercise by finding another way.

Thank you for this helpful post. – Ramazan Erikli Apr 12 '19 at 09:33 — Ramazan Erikli, Apr 12 '19 at 09:33

score -1 · Answer 2 · answered Apr 12 '19 at 08:39

Try this:

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

How to add an iconed li item to ul in Javascript?

2 Answers2