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>

Does this answer your question? How to delete an <li> from list with javascript ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { this.removeChild(e.target); }) — Daniel Manta
– Daniel Manta, Commented Apr 9, 2021 at 18:04

Mr. Polywhirl · Accepted Answer · 2021-04-09 18:05:22Z

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>

Mulan · Accepted Answer · 2021-04-09 18:04:52Z

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>

Collectives™ on Stack Overflow

I want to delete list items from UL list using javascript

2 Answers 2

Full example

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Full example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related