how to delete a list item by using a button in javascript?

Question

I'm making a simple task list that will take user input and append it to and unordered list whenever the add button is clicked. Once the item is added the text will be appended to a list element along with a delete button. I'm new to JavaScript so I don't quite know how to make the delete button remove the list element that the user clicks on. Note: it's a span element, not a button.

I think removeChild() might be good, but I can't seem to implement it.

let addButton = document.getElementById("add-item");

addButton.addEventListener("click", function () {
    
    // Retrieves the 'list'
    let list = document.getElementById("items");
    let textNode = window.prompt("Enter item:");
    if (textNode != null) {
        let item = document.createElement("li");
        //Creates a textnode from the users input
        item.appendChild(document.createTextNode(textNode));
        //Adds the users textnode at the end of the list
        list.appendChild(item);
        // Creates a delete button 
        let deleteButton = document.createElement("span");
        deleteButton.innerHTML = "Delete"
        item.appendChild(deleteButton)
    }
});

ul {
    padding: 0px;
}

li {
    display: flex;
    background-color: #eee;
    margin: 5px;
    padding: 5px;
    align-items: center;
}

li > span {
    margin-left: auto;
    background-color: #aaa;
    padding: 5px;
    cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="app_2.css" rel="stylesheet">
    <title>Items</title>
</head>

<body>
    <h1>Items</h1>

    <ul id="items">
        <!--
            This is the template for an item in the list:

            <li>The first item is free! <span>Delete</span></li>
        -->
    </ul>
    
    <button type="button" id="add-item">Add item</button>

    <script src="app_2.js"></script>
</body>

</html>

@Bella but i want to remove what the user wants to remove, not hide it — NotSmart
– NotSmart, Commented Apr 9, 2022 at 13:48
You can add a click event listener to the deleteButton element and execute item.remove() when the callback of that listener runs, eg: deleteButton.onclick = () => item.remove() — Titus
– Titus, Commented Apr 9, 2022 at 13:52

Nick Vu · Accepted Answer · 2022-04-09 14:03:29Z

You can add a click event on deleteButton to handle that case

deleteButton.addEventListener("click", function() {
   item.remove()
})

Full code

let addButton = document.getElementById("add-item");

const currentIndex = 0

addButton.addEventListener("click", function() {

  // Retrieves the 'list'
  let list = document.getElementById("items");
  let textNode = window.prompt("Enter item:");
  if (textNode != null) {
    let item = document.createElement("li");
    //Creates a textnode from the users input
    item.appendChild(document.createTextNode(textNode));
    //Adds the users textnode at the end of the list
    list.appendChild(item);
    // Creates a delete button 
    let deleteButton = document.createElement("span");
    //add a click event to remove the current item
    deleteButton.addEventListener("click", function() {
      item.remove()
    })
    deleteButton.innerHTML = "Delete"
    item.appendChild(deleteButton)
  }
});

ul {
  padding: 0px;
}

li {
  display: flex;
  background-color: #eee;
  margin: 5px;
  padding: 5px;
  align-items: center;
}

li>span {
  margin-left: auto;
  background-color: #aaa;
  padding: 5px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="app_2.css" rel="stylesheet">
  <title>Items</title>
</head>

<body>
  <h1>Items</h1>

  <ul id="items">
    <!--
            This is the template for an item in the list:

            <li>The first item is free! <span>Delete</span></li>
        -->
  </ul>

  <button type="button" id="add-item">Add item</button>

  <script src="app_2.js"></script>
</body>

</html>

Karakuchi · Accepted Answer · 2022-04-09 14:02:00Z

Here is how you can add an event listener to the delete button and make the delete button remove the item from the list. I have added comments in the code to show where I made changes and explain whats going on.

let addButton = document.getElementById("add-item");

addButton.addEventListener("click", function () {
    
    // Retrieves the 'list'
    let list = document.getElementById("items");
    let textNode = window.prompt("Enter item:");
    if (textNode != null) {
        let item = document.createElement("li");
        //Creates a textnode from the users input
        item.appendChild(document.createTextNode(textNode));
        //Adds the users textnode at the end of the list
        list.appendChild(item);
        // Creates a delete button 
        let deleteButton = document.createElement("span");
        deleteButton.innerHTML = "Delete"
        item.appendChild(deleteButton);
        
        
        //add an event listener for the delete button
        deleteButton.addEventListener("click", function(){
          
          //get the parent of the span (li) 
          let listItem = this.parentNode;
          //get the parent of the list item (ul)
          let list = listItem.parentNode;
          //remove the child from the list         
          list.removeChild(listItem);
         
        });
    }
});

ul {
    padding: 0px;
}

li {
    display: flex;
    background-color: #eee;
    margin: 5px;
    padding: 5px;
    align-items: center;
}

li > span {
    margin-left: auto;
    background-color: #aaa;
    padding: 5px;
    cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link href="app_2.css" rel="stylesheet">
    <title>Items</title>
</head>

<body>
    <h1>Items</h1>

    <ul id="items">
        <!--
            This is the template for an item in the list:

            <li>The first item is free! <span>Delete</span></li>
        -->
    </ul>
    
    <button type="button" id="add-item">Add item</button>

    <script src="app_2.js"></script>
</body>

</html>

Andy · Accepted Answer · 2022-04-09 14:39:22Z

Use event delegation. Instead of attaching listeners to every button add one listener to the parent element (in this case the ul element), and have that capture all the events from its child elements as they "bubble up" the DOM, and have that listener call a function to update the list.

I've used a slightly more modern approach to building the rows in my answer that you may find useful. Links to all the relevant MDN documentation are at the end of the answer.

const items = document.querySelector('#items');
const addButton = document.querySelector('#add-item');

// Add listeners to both button and the items list element
// In the case of `addItem` you can see that I'm calling the
// function instead of returning a function reference. This will
// become relevant later. `addClick` returns a _new_ function that
// will be used as the listener
items.addEventListener('click', handleClick, false);
addButton.addEventListener('click', addItem(), false);

function handleClick(e) {

  // Because we're using event delegation we need
  // to check that the element we clicked on was
  // the button with the delete class
  if (e.target.matches('.delete')) {

    // If it is destructure the id from
    // the element's dataset
    const { id } = e.target.dataset;

    // Use that to build a selector
    const selector = `li[data-id="${id}"]`;

    // And remove that list item from the list
    items.querySelector(selector).remove();

  }

}

// Because I want as few global variables as possible
// I'm using a closure. Basically a function that retains
// it's outer lexical environment when it's returned.
// The inner function is the function that's used as the
// handler for the listener but it retains a copy of `id`
// which it can update when called
function addItem() {

  let id = 0;

  return function () {

    const text = window.prompt('Enter item:');

    if (text) {

      // Instead of `createElement` I'm using a template
      // string to build the HTML. Add the id to both the
      // item and the button so that when the button is
      // clicked the handleClick function can
      // remove the right item
      const html = `
        <li data-id="${id}">
          ${text}
          <button
            type="button"
            data-id="${id}"
            class="delete"
          >Delete
          </button>
        </li>
      `;

      // That HTML gets added to the list
      items.insertAdjacentHTML('beforeend', html);

      // And the row id is increased
      ++id;

    }

  }

}

ul{padding:0}
li{display:flex;background-color:#eee;margin:5px;padding:5px;align-items:center}
.delete{margin-left:auto;background-color:#aaa;padding:5px;cursor:pointer}

<h1>Items</h1>
<ul id="items"></ul>
<button type="button" id="add-item">Add item</button>

Additional documentation

Collectives™ on Stack Overflow

how to delete a list item by using a button in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related