How do I splice my array?

Question

I have a favourites feature, but want the user to be able to remove them.

This is what it looks like:

So what I want to achieve is a "Remove" link under each item which calls the remove function, and so removes that entity.

Here is my JS:

function updateFavourite(video) {
    document.getElementById('favourite').onclick = function () {
        if ($.grep(myfavourite, function (item) {
            return item["id"] == video["id"];
        }).length == 0) {
            blacklist[video["id"]] = true;
            myfavourite.push(video);
            var html = "<li class=\"history\">" +
                "<img class= \"img-rounded\" src=\"{0}\"/>" +
                "<p><b title=\"{2}\"><a class=\"extendedLink\" href=\"javascript:watchFavouriteVideo(\'{1}\');\"><span></span>{2}</a></b><br>" +
                "by {3}<br>" +
                "{4} | {5} views</p>" +
                "</li>";

            $("#myfavourite").prepend(html.format(video["thumbnail"],
                video["id"],
                video["title"],
                video["uploader"],
                video["length"],
                video["views"]));
        }
    }
}

function remove(video) {
    document.getElementById('remove').onclick = function () {
        myfavourite.splice(video, 1);
    }
}

The problem is that it does not remove the video, and don't know how to add the "Remove" text for each entity.

Answer 1

Here is an example

HTML

<div id="favourites"></div>
<div id="displayList"></div>

CSS

#favourites {
    width:auto;
    height:100px;
}
.favourite {
    width:auto;
    height: auto;
    margin-right:10px;
    background-color:cyan;
    float:left;
}
.title {
    width:auto;
    height: auto;
    background-color:red;
    border:0px;
    text-align:center;
}
.picture {
    width:50px;
    height: 50px;
    background-position:center;
    display:block;
    margin:0 auto;
}
.remove {
    width:auto;
    height: auto;
    text-align:center;
}
.remove:hover {
    cursor:pointer;
    background-color:yellow;
}
#displayList {
    min-height:20px;
    clear:both;
    border:1px solid black;
}

Javascript

var picsArray = [
        'http://upload.wikimedia.org/wikipedia/commons/1/1b/Beys_Afroyim_with_son_%28cropped%29.jpg',
        'http://upload.wikimedia.org/wikipedia/commons/8/8a/Tammam_Salam.jpg',
        'http://upload.wikimedia.org/wikipedia/commons/2/27/Ratusz2007.jpg',
        'http://upload.wikimedia.org/wikipedia/commons/6/60/GPN-2000-001979.jpg'
    ],
    list = picsArray.slice(),
    favourites = document.getElementById('favourites'),
    displayList = document.getElementById('displayList');

function emptyNode(node) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

function updateDisplayList() {
    emptyNode(displayList);
    list.map(function (entry) {
        return entry.split('/').slice(-1)[0];
    }).forEach(function (shortEntry) {
        var p = document.createElement('p');

        p.appendChild(document.createTextNode(shortEntry));
        displayList.appendChild(p);
    });
}

list.forEach(function (pic) {
    var favourite = document.createElement('div'),
        title = document.createElement('div'),
        img = document.createElement('img'),
        remove = document.createElement('div');

    favourite.className = 'favourite';
    title.className = 'title';
    img.className = 'picture';
    remove.className = 'remove';

    title.appendChild(document.createTextNode('Favourite'));
    favourite.appendChild(title);

    img.src = pic;
    favourite.appendChild(img);

    remove.appendChild(document.createTextNode('Remove'));
    remove.addEventListener('click', function (e) {
        e.target.parentNode.parentNode.removeChild(e.target.parentNode);
        list = list.filter(function (ele) {
            return ele !== e.target.previousSibling.src;
        });

        updateDisplayList();
    }, false);

    favourite.appendChild(remove);
    favourites.appendChild(favourite);
});

updateDisplayList();

On jsFiddle