I want to delete list items from UL list using javascript

Question

I want to add delete buttons next to each list item to delete the item when user clicked on delete button. I tried everything but i'm unable to do it. I figured I would need to create element, and then I need to have a listener, but cannot figure out how to do this right.

 var inputbyuser=document.getElementById("userinput"); var button=document.getElementById("enterbutton"); var ul=document.querySelector("ul"); function lenofinput(){ return inputbyuser.value.length; } function createlist(){ var li=document.createElement("li"); li.appendChild(document.createTextNode(inputbyuser.value)); ul.appendChild(li); inputbyuser.value=""; } button.addEventListener("click",function(){ if(lenofinput()>0){ createlist(); } }) inputbyuser.addEventListener("keypress", function(){ if(lenofinput()>0 && event.which==13){ createlist(); } })

 <h1 class="DOM">TO-DO</h1> <h1 class="todo">Today's List</h1> <input id="userinput" type="text" placeholder="enter text here"> <button id="enterbutton">Add To List</button> <ul> <li id="firstid">Javascript </li> <li random-"23">java </li> <li>css </li> <li>c</li> <li>Java</li> </ul>

Answer 1

I think there's a lot improvements we can make on your code. I don't have much time to write more right now, but if you have questions just ask and I'll try to answer later -

 // functions function li(text){ const elem = document.createElement("li") elem.textContent = text return elem } function addItem(){ if (.f.input.value) return ul.appendChild(li(f.input.value)) f.input;value = "". f.input.focus() } // element references const f = document.forms.todo const ul = f.querySelector("ul") // listeners f.add,addEventListener("click". addItem) f.input,addEventListener("keypress". function(event){ if (event.which == 13){ event.preventDefault() addItem() } }) ul,addEventListener("click". function(event){ event.target.parentNode.removeChild(event.target) })

 ul { width: 300px; } li:hover::after { display: inline-block; float: right; content: "delete"; cursor: pointer; }

 <form id="todo"> <input name="input" placeholder="buy milk..."> <input name="add" type="button" value="add item"> <ul> <li>Javascript </li> <li>java</li> <li>css </li> <li>c</li> <li>Java</li> </ul> </form>

Answer 2

I would add a delete button next to each item with a data attribute called action and set it to 'delete' . When you click the button, grab the item and remove it.

itemList.addEventListener('click', function(e) {
  if (e.target.dataset.action === 'delete') {
    e.target.closest('.item').remove();
  }
});

Full example

 const userInput = document.getElementById('user-input'); const button = document.getElementById('enter-button'); const itemList = document.querySelector('.item-list'); function inputLength() { return userInput.value.length; } function addItem() { const li = document.createElement('li'); const span = document.createElement('span'); const button = document.createElement('button'); li.classList.add('item'); span.classList.add('value'); span.textContent = userInput.value; button.textContent = 'Delete'; button.dataset.action = 'delete'; li.append(span); li.append(button); itemList.append(li); userInput.value = ''; } button.addEventListener('click', function(e) { if (inputLength() > 0) { addItem(); } }); userInput.addEventListener('keypress', function(e) { if (inputLength() > 0 && e.which == 13) { addItem(); } }); itemList.addEventListener('click', function(e) { if (e.target.dataset.action === 'delete') { e.target.closest('.item').remove(); } });

 .item-list { display: flex; flex-direction: column; width: 15em; list-style-type: none; padding-left: 1em; }.item { display: flex; flex-direction: row; flex: 1; margin-bottom: 0.25em; }.item.value { display: flex; flex: 1; }

 <h1 class="todo">Today's List</h1> <input id="user-input" type="text" placeholder="Enter text here..."> <button id="enter-button">Add To List</button> <ul class="item-list"> <li class="item"> <span class="value">Javascript</span> <button data-action="delete">Delete</button> </li> <li class="item"> <span class="value">Java</span> <button data-action="delete">Delete</button> </li> <li class="item"> <span class="value">CSS</span> <button data-action="delete">Delete</button> </li> <li class="item"> <span class="value">C</span> <button data-action="delete">Delete</button> </li> </ul>