CODEWITHSUNDEEP
javascripthtml
TessellatingPi
TessellatingPi

Reputation: 103

How to clear element from to-do list (with user-added elements)?

I have a to-do list page with a div rectangle and an ordered list inside. There is a button that triggers and "addToList" function on click. But how do I remove a specific element that was added by the user?

For example:

  1. Wake up
  2. Brush teeth
  3. Eat breakfast

How can i make a function that removes any of the elements in the list and say, if i remove element 2, replace 3's number with 2? The javascript code is here:

<script type='text/javascript'>
        function addToList () {
            var newToDo = prompt("Please enter something to do.");
            var ol = document.getElementById('demo');
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(newToDo));
            ol.appendChild(li);
        }
        function clearList () {
            var ol = document.getElementById('demo');
            ol.innerHTML = '';
            var li = document.createElement('li');
            li.appendChild(document.createTextNode("First Element"));
            ol.appendChild(li);
        }
    </script>

The html is here:

<div style="width:300px;height:500px;border:1px solid #000;">
    <ol id="demo">
        <li>Enter things to do</li>
    </ol>
    <button onclick="addToList()">Add To List</button>
    <button onclick="clearList()">Clear List</button>
    </div>

Upvotes: 0

Views: 117

Answers (2)

Michael Laszlo
Michael Laszlo

Reputation: 12239

One way to accomplish your goal is to call ol.getElementsByTagName('li') to retrieve all the list items inside the ordered list. These list items will be returned in an array.

Note that the array is indexed starting at zero. Your user sees a list indexed starting from one. If you prompt the user to type in an item number, you have to subtract 1 from the item number to get the index of the item in the array.

Finally, you can call removeChild() on the ordered list, passing the list item as the argument. The item is removed from the list and the remaining items are reordered automatically by the browser.

Here is a function that does the above:

function removeFromList () {
    var input = prompt('Enter the number of the item to be removed.');
    var ol = document.getElementById('demo'),
        items = ol.getElementsByTagName('li'),
        removeIndex = parseInt(input, 10) - 1;
    if (removeIndex >= 0 && removeIndex < items.length) {
        ol.removeChild(items[removeIndex]);
    } else {
        alert('"'+input+'" is not a valid item number.');
    }
}

And here is a button that you can add to your existing HTML to call removeFromList:

<button onclick="removeFromList()">Remove from list</button>

Another approach, and one that I prefer from a user-interface perspective, is to have a deletion widget attached to the list item instead of prompting the user for an item number. There are many ways to implement such a widget. You can add checkboxes or buttons to the list items as they're created, or you can generate a button on demand when the user mouses over an item.

Below is an implementation of one particular approach. The item-adding function generates an invisible widget for each list item. The widget is a span element that appears toward the left when the user mouses over the list item. If the user clicks on the widget, the list item disappears.

Note the use of an anonymous function, function () { ol.removeChild(li) }, to capture the value of li at the time that the list item is being created. The value of li is in the closure of the function. It refers to the list item. When onclick fires, the function is evaluated and the list item is removed from its parent, ol, which is also retained by the closure.

You can try out this code on JSFiddle: http://jsfiddle.net/1unppned/

<html>
<head>
<style type="text/css">
.deleteBox {
    color: #9c1f1f;
    background: #ffc;
    font-family: sans-serif;
    font-weight: bold;
    padding: 2px 5px;
    margin-left: -25px;
    margin-right: 5px;
    visibility: hidden;
}   
li:hover {
    cursor: default;
    background: #eee;
}   
li:hover .deleteBox {
    visibility: visible;
    cursor: pointer;
}   
</style>
<script>
function addToList () {
    var item = prompt("Please enter something to do.");
    if (item !== null) {
        addListItem(item);
    }
}
function addListItem(item) {
    var ol = document.getElementById('demo'),
        li = document.createElement('li'),
        deleteBox = document.createElement('span');
    deleteBox.className = 'deleteBox';
    deleteBox.appendChild(document.createTextNode('X'));
    deleteBox.onclick = function () { ol.removeChild(li) };
    li.appendChild(deleteBox);
    li.appendChild(document.createTextNode(item));
    ol.appendChild(li);
}
function clearList () {
    var ol = document.getElementById('demo');
    ol.innerHTML = '';
}
function main() {
    addListItem('Check the mailbox.');
    addListItem('Buy milk.');
    addListItem('Test the app.');
}
window.onload = main;
</script>
</head>
<body>
<div style="width:300px;height:500px;border:1px solid #000;">
    <ol id="demo">
    </ol>
    <button onclick="addToList()">Add to list</button>
    <button onclick="clearList()">Clear list</button>
</div>
</body>
</html>

Upvotes: 1

dandavis
dandavis

Reputation: 16726

add a button to remove it when when creating the list item:

function addToList () {
    var newToDo = prompt("Please enter something to do.");
    if(!newToDo) return;
    var ol = document.getElementById('demo');
    var li = document.createElement('li');
    li.innerHTML= "<button onclick=parentNode.remove()>X</button> "+newToDo;
    ol.appendChild(li);
}

function clearList () {
    var ol = document.getElementById('demo');
    ol.innerHTML = '';
    var li = document.createElement('li');
    li.appendChild(document.createTextNode("First Element"));
    ol.appendChild(li);
}

obligatory fiddle demo: http://jsfiddle.net/0o5tczn9/

Upvotes: 0

Related Questions