CODEWITHSUNDEEP
javascripthtml
user12253868
user12253868

Reputation: 27

How to add a button to every list item in an unordered list?

I am trying to make a simple to-do list app and am unsure how to add a "delete" button beside each list item. My code so far is the following: 

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value;
  var li = "<li>" + text + "</li>";
  document.getElementById("list").insertAdjacentHTML('beforeend', li);
  document.getElementById("input").value = ""; // clear the value
}
<h1>To-Do List</h1>
<input type="text" id="input" />
<input type="button" value="Add Note" id="add" />
<ul id="list"></ul>

Upvotes: 0

Views: 396

Answers (2)

Jay Nyxed
Jay Nyxed

Reputation: 497

It can be done in the same place where you add your <li> elements:

var li = "<li>" + text + "<button type='button'>delete</button></li>";

Upvotes: 1

Gaurav Mogha
Gaurav Mogha

Reputation: 400

One way is use * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

document.getElementById("add").onclick = function() {
    var text = document.getElementById("input").value;
    var li = `<li>${text} <input type="button" value="Delete"></li>`;
    document.getElementById("list").insertAdjacentHTML('beforeend', li);
    document.getElementById("input").value = ""; 
}

Upvotes: 0

Related Questions