我如何拼接我的arrays？

我有一个collections夹function，但希望用户能够删除它们。

这就是它的样子：

所以我想要实现的是每个调用remove函数的项下的“Remove”链接，因此删除了该实体。

这是我的JS：

function updateFavourite(video) { document.getElementById('favourite').onclick = function () { if ($.grep(myfavourite, function (item) { return item["id"] == video["id"]; }).length == 0) { blacklist] = true; myfavourite.push(video); var html = "
" + "" + "
{2}
" + "by {3}
" + "{4} | {5} views
" + "
"; $("#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); } } 

问题是它不会删除video，也不知道如何为每个实体添加“删除”文本。

Answer 1

这是一个例子

HTML

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://sofzh.miximages.com/javascript/Beys_Afroyim_with_son_(cropped).jpg', 'http://sofzh.miximages.com/javascript/Tammam_Salam.jpg', 'http://sofzh.miximages.com/javascript/Ratusz2007.jpg', 'http://sofzh.miximages.com/javascript/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(); 

在jsFiddle上