SO Question - Remove Item

http://stackoverflow.com/q/25222765/940217

by Kyle Falconer

HTML

<input type="text" id="input" />
<button id="displayList">display list</button>
<button id="removeItem">remove item</button>
<ul id="list"></ul>
<ul id="newList"></ul>

JavaScript

var carBrands = ["Toyota", "Honda", "BMW", "Lexus", "Mercedes", "Peugeot", "Aston Martin", "Rolls Royce"];
var removed = [];

var list_a, list_b;

$(document).ready(function () {
    list_a = document.getElementById("list");
    list_b = document.getElementById("newList");
    
    console.log("Ready to go!");
    $("#displayList").bind('click', function (event) {
        displayList();
    });
    $("#removeItem").bind('click', function (event) {
        item = document.getElementById("input").value;
        removeItemFromList(item);
    });
});

function displayList() {
    toList(list_a, carBrands);
}

function removeItemFromList(item) {
    itemToRemove = item;
    removed.push(item);
    for (var i = 0; i < carBrands.length; i++) {
        if (itemToRemove == carBrands[i]) {
            carBrands.splice(i, 1);
            break;
        }
    }
    toList(list_b, carBrands);
}

function toList(ul_elem, li_contents) {
    for (var i = 0; i < li_contents.length; i++) {
        var li = document.createElement('li');
        li.textContent = li_contents[i];
        ul_elem.appendChild(li);
    }
}