Need help dynamically removing checked item from ul in html

Question

This is my first html project and I am trying to make a simple todo list. I have two buttons, an add and delete button. The add button works and displays whatever item I have the user enter into the input tag. Now I would like to remove any items from my list if they are checked and the user clicks the 'delete checked' button. I have some javascript written and this isn't working. Would anyone be able to point me in the correct direction on how to properly implement my delete button?

So in this screenshot, when the 'delete checked' button is pressed I would like for the 'eggs' item and 'oranges' item to be deleted.

<!DOCTYPE html>
<html>
  <head>
    <title>ToDoList</title>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-cabable" content="yes"/>
    <style type="text/css">
      h1 {
  color: white;
  text-align: center;
  background-color: rgb(128,128,128);
  font-weight: bold;

}

body {
  font-family: helvetica, sans-serif;
  font-size: 16px;
}

form {
  text-align: center;
  border-top: thin dotted;
  padding-top: 1em;
  border-bottom: thin dotted;
  padding-bottom: 1em;
}

ul {
  display: table;
  margin: 0 auto;

}

input {
  text-align: center;
  width: wrap_content;
  line-height: 1.4em;
  border: 2px solid rgb(128,128,128);
  border-radius: 5px;
  padding: 10px 17px;
  font-size: 14px;
}

button {
  font-size: 14px;
  border-radius: 5px;
  background-color: rgb(128,128,128);
  padding: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.deleteall {
  position: relative;
}
    </style>
  </head>
  <body>
    <head>
      <h1>
        ToDo-List
      </h1>
    </head>
    <form>
      <label>
        Title:
        <input id="newitem" type="text" placeholder="Tap to enter a new item&hellip;">
        <br>
        Details:
        <input id="detail" type="text" placeholder="Details of new item&hellip;">
        <br>
        Date:
        <input id="date" type="date" placeholder="year/month/day">
        <br>
        Time:
        <input id="time" type="time" placeholder="00:00">
        <br>
      </label>
      <button type="button" id="additem">
        Add
      </button>
      <button class="button deleteall" type="button" id="deleteitems">
        Delete Checked
      </button>
    </form>

    <ul id="todo-list-container">
    </ul>

    <script type="text/template" id="item-template">
    <li>
      <label>
        <input type="checkbox">
        <!-- ITEM_NAME -->
      </label>
    </li>
    </script>

    <script>
    var addNewItem = document.getElementById("additem");
    var newItem = document.getElementById("newitem");
    var toDoListContainer = document.getElementById("todo-list-container");
    var itemTemplate = document.getElementById("item-template");
    var template = itemTemplate.innerText;
    var deleteAllItems = document.getElementById("deleteitems");

    addNewItem.addEventListener('click', function(event) {
      var itemName = newItem.value;
      newItem.value = "";

      var itemHTML = template.replace("<!-- ITEM_NAME -->", itemName);
      toDoListContainer.insertAdjacentHTML('afterbegin', itemHTML);
    });

    deleteAllItems.addEventListener('click', function(event) {
       var ul = document.getElementById("todo-list-container");
       var items = ul.getElementsByTagName("li");

       for (var i = 0; i < items.length; ++i){
        if(items.checked == true){
          // remove item from list
          items.remove();
        }
       }

    });
    </script>
  </body>
</html>

`this isn't working` - in what way doesn't it work? any console errors? check the for loop inside the delete click handler, you have a number of issues, especially without knowing what `getElementsByTagName` actually returns — Jaromanda X, Aug 05 '16 at 01:08

Jessica · Answer 1 · 2016-08-05T11:16:15.200

I finally got it working! Here's what I did.

Created Empty array called toDoListData.
Add an event to addItem, which adds the data to the toDoListData array then calls refreshUIbasedOnArray() function (will explain later what that does.)
Add an event to deleteItems, which loops through the array, and checks if there are any checked items in toDoListContainer children. If is checked, make index i in array equal null. (The array and toDoListContainer children have the same data.) Then call refreshUIbasedOnArray().
Add an Event to deleteAllItems, which just empties the toDoListData array, and calls refreshUIbasedOnArray().
refreshUIbasedOnArray function empties out toDoListContainer children (so it can repopulate later on). Then delete all null in toDoListData array. Next, loops through toDoListData array and creates the necessary elements, which is then appended to toDoListContainer.

Hope this is clear.

JSFiddle

var title = document.getElementById("title");
var detail = document.getElementById("detail");
var addNewItem = document.getElementById("additem");
var deleteItems = document.getElementById("deleteitems");
var deleteAllItems = document.getElementById("deleteAllItems")
var toDoListContainer = document.getElementById("todo-list-container");

var toDoListData = [];

addNewItem.addEventListener('click', function(event) {
  var titleText = title.value;
  var detailText = detail.value;

  // If titleText, or detailText doesn't have any
  // text in it, then return; don't do anything
  if (!titleText || !detailText) return;

  toDoListData.push({
    title: titleText,
    detail: detailText
  });
  refreshUIbasedOnArray();
  title.value = '';
  detail.value = '';
});

deleteItems.addEventListener('click', function(event) {
  for (var i = 0; i < toDoListData.length; i++) {
    if (toDoListContainer.children[i].firstElementChild.checked) {
      toDoListData[i] = null;
    }
  }
  refreshUIbasedOnArray();
});

deleteAllItems.addEventListener('click', function(event) {
  // Empty 'toDoListData' array
  toDoListData = [];
  refreshUIbasedOnArray();
});

function refreshUIbasedOnArray() {
  // Remove everything from 'toDoListContainer',
  // then repopulate it from the 'toDoListData' array

  toDoListContainer.innerHTML = "";

  // Reason for loops through the array backwards,
  // see: http://stackoverflow.com/a/18165553/4861207 
  for (var i = toDoListData.length; i--;) {
    if (toDoListData[i] === null) {
      toDoListData.splice(i, 1);
    }
  }

  for (var i = 0; i < toDoListData.length; i++) {
    var listWrapper = document.createElement("li");
    var checkBox = document.createElement("input");
    var text = document.createElement("div");

    checkBox.type = 'checkbox'

    text.innerHTML = toDoListData[i].title;

    listWrapper.appendChild(checkBox);
    listWrapper.appendChild(text);
    toDoListContainer.appendChild(listWrapper);
  }
}

h1 {
  color: white;
  text-align: center;
  background-color: rgb(128, 128, 128);
  font-weight: bold;
}
body {
  font-family: helvetica, sans-serif;
  font-size: 16px;
}
form {
  text-align: center;
  border-top: thin dotted;
  padding-top: 1em;
  border-bottom: thin dotted;
  padding-bottom: 1em;
}
ul {
  display: table;
  margin: 0 auto;
}
input {
  text-align: center;
  width: wrap_content;
  line-height: 1.4em;
  border: 2px solid rgb(128, 128, 128);
  border-radius: 5px;
  padding: 10px 17px;
  font-size: 14px;
}
button {
  font-size: 14px;
  border-radius: 5px;
  background-color: rgb(128, 128, 128);
  padding: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}
.deleteall {
  position: relative;
}

<h1>ToDo-List</h1> Title:
<input id="title" type="text" placeholder="Tap to enter a new item&hellip;">
<br>Details:
<input id="detail" type="text" placeholder="Details of new item&hellip;">
<br>
<button type="button" id="additem">
  Add
</button>
<button class="button" type="button" id="deleteitems">
  Delete Checked
</button>
<button class="button" type="button" id="deleteAllItems">
  Delete All
</button>

<ul id="todo-list-container">
</ul>

Need help dynamically removing checked item from ul in html

1 Answers1

JSFiddle