Remove all items button

Question

In this JavaScript code is something like you can delete the items by id and it is too long proces I want something shorter. So I wanna delete all items by pressing one button. I tried to edit it but I always fail.

JavaScript code :

var currentFormVisibilityStatus = false;
function SaveNotes() {
    var category = document.getElementById("slSearchCategory").value;
    var todo = document.getElementById("txtToDo").value;

    if (category == "") {
        alert("Please select Category.");
        return;
    }

    var storage = JSON.parse(localStorage.getItem('ToDoList'));
    var arrayLength = storage.length;

    storage[arrayLength] = category;
    storage[arrayLength + 1] = todo;
    localStorage.setItem('ToDoList', JSON.stringify(storage));
    category = "";
    loadNotes();
    clearNote();
}

function clearNote() {
    var todo = document.getElementById("txtToDo");
    todo.value = '';
}

function loadNotes() {
    var storage = JSON.parse(localStorage.getItem('ToDoList'));

    if (!storage) {
        storage = [];
        localStorage.setItem('ToDoList', JSON.stringify(storage));
    }

    var displayArea = document.getElementById("displayArea");
    var currentFilter = document.getElementById("slSearchCategory").value;
    var innerDiv = "";
    for (var i = storage.length - 1; i >= 0; i = i - 2) {
        if (currentFilter == storage[i - 1] || currentFilter == "") {
            var todoColor = 'ffffff';
            switch (storage[i - 1]) {

                case 'Sales':
                    todoColor = 'ffffff';
                    break;
                default:
                    todoColor = 'ffffff';
                    break;
            }
            innerDiv += "<div class='displayToDo'  style='background:#" + todoColor + "'><input type='image' src='delete.png' width='15px' height='15px' onclick='removeMe(" + i + ")' />  " + storage[i] + "</div>"+ "</br>";
        }
    }

    if (innerDiv != undefined) {
        displayArea.innerHTML = innerDiv;
    }
    else {
        displayArea.innerHTML = "";
    }
}

function removeMe(itemId) {
    var storage = JSON.parse(localStorage.getItem('ToDoList'));
    storage.splice(itemId - 1, 2);
    localStorage.setItem('ToDoList', JSON.stringify(storage));
    loadNotes();
}


onload = function () {
    loadNotes();
    ShowHideForm();
}

Html code :

    <div class="headerDiv">
        <span>Category :</span>
        <select id="slSearchCategory" class="textBox" onchange="loadNotes()" style="width: 100px">
            <option value="" selected="selected">All ToDo</option>
            <option value="Personal">Personal</option>
            <option value="HR">HR Query</option>
            <option value="Payroll">Payroll</option>
            <option id="Sales" value="Sales">Sales</option>
        </select>
        <span style="padding-left: 20px">Todo : </span>
        <textarea id="txtToDo" class="textBox" rows="2" cols="20" style="width: 300px"></textarea>
        <input type="button" onclick="SaveNotes()" name="Submit" class="submitButton" title="Submit"
            value="Add Todo" />
    </div>
    <div id="displayArea">
    </div>
<input type="button" onclick="removeAll();" value="Remove all"/>

That's not "Java" code, but "JavaScript", and they're about as similar as ham is to hamburger. I've changed your question tags to reflect this, but you owe it to your future self to study up on the differences so as to not confuse yourself again. Wikipedia can help. — Hovercraft Full Of Eels, Feb 22 '14 at 13:20
What ? One say it's not Javascript but Java and another say it's not Javascript but Java . Now I absolutely don't know what to use. — George Simon, Feb 22 '14 at 13:23
@George Simon Who says that it is Java? This is definitely JavaScript. Completely different things — , Feb 22 '14 at 13:24
@GeorgeSimon Who told you that? and that is for sure Javascript! — vallentin, Feb 22 '14 at 13:24
George: your posted code is JavaScript, there is no doubt about it. You have your homework to do so that you can recognize and understand the differences. — Hovercraft Full Of Eels, Feb 22 '14 at 13:24
Ok , you convince me! It's Javascript. Now can you help me with my second problem ? — George Simon, Feb 22 '14 at 13:26
If you don't understand the difference between Java and Javascript, would our helping you be actually any help at all? Would you _understand_ what we'd show you? — Andy, Feb 22 '14 at 13:29
Fine. Why don't you annotate the code in your post to show us that you know what it does. Perhaps then we won't think that we're wasting our time. — Andy, Feb 22 '14 at 13:46

score 1 · Accepted Answer · edited May 23 '17 at 12:03

1

you can create a new function and call it with an onclick event

the HTML code

<input type="button" value="Remove all" onclick="removeAll();"/>

the JavaScript function

function removeAll(){
  var storage = JSON.parse(localStorage.getItem('ToDoList'));
  storage.length=0;
  localStorage.setItem('ToDoList', JSON.stringify(storage));
  loadNotes();
}

also take a look at How do I empty an array in JavaScript? so you know how to empty an array the right way

edited May 23 '17 at 12:03

Community

1
1

answered Feb 22 '14 at 13:33

And if i wnat remove only one category ? For example Sales ? – George Simon Feb 22 '14 at 14:31
is there some HTML code so I can check/test this? I would prefer creating a new question for the removal of a category. Theoretically you have to use a for loop with a switch statement like in your JavaScript code and remove the items which are found – Feb 22 '14 at 14:40
I update my question with html code. – George Simon Feb 22 '14 at 14:42
ok thanks, please make a new question for this with the ctaegory feature and link to this question here for the HTML and JavaScript code, so others also have a chance to post an answer ;-) it is preferred to make a new question for each problem and not solve all in one, this could lead to long comment threads or chats, whic is not the goal. One problem - one answer at a time. – Feb 22 '14 at 15:46

Remove all items button

1 Answers1