javascript - 通过单击 HTML <li> 删除数组元素

Question

所以我正在为 youtube 做一个播放列表管理器(使用 ytb api)和我正在做的图形部分，比如 youtube 有一个给定播放列表中每个缩略图的列表。我使用 HTML“ul”并将每个缩略图添加为“li”。 一切正常，但我想添加一项功能，以便用户可以单击其中一个缩略图将其从播放列表中删除。

首先，让我解释一下重要部分是如何编码的。

我使用一个数组作为队列来存储每个将要播放的视频 ID(这是播放列表): var 队列 = []

对于缩略图列表，我使用了这个函数:

function refreshThumbnailsQueue() {
    var thumbnailsUl = document.getElementById('thumbnailslist');
    while(thumbnailsUl.firstChild) {
      thumbnailsUl.removeChild(thumbnailsUl.firstChild );
    }
    for (var i = 0; i <= queue.length - 1; i++) {
        var thumbnail = 'http://img.youtube.com/vi/' + queue[i] + '/maxresdefault.jpg';
        var newLi = document.createElement('li');
        newLi.className = 'thumbnailLi';
        newLi.onclick = function() {
            removeFromQueue();
        }
        var newImg = document.createElement('img');
        newImg.className = 'thumbnailImg';
        newImg.src = thumbnail;
        newLi.appendChild(newImg);
        thumbnailsUl.appendChild(newLi);
    }
}

所以我只是删除 ul 拥有的每个 child ，然后用我的队列 var 中的视频 ID 的每个缩略图填充它。

如您所见，在代码中的每个 li 上都有一个使用 onclick 事件调用的 removeFromQueue() 函数，这就是我尝试编写的代码。 基本上，如果您单击第三个 li，它应该会删除我的队列变量的第三个元素。

如果您有任何想法，请告诉我。 (顺便说一句，对于英语不是我的主要语言的错误感到抱歉)

谢谢!

注意:我不想使用 jQuery。

Answer 1

如果 jQuery 是一个选项，您可以简单地执行以下操作:

$( "li" ).click(function(){
  $( this ).remove();
})

就这么简单。如果您需要更多信息，我会更新我的答案。

---

您也可以访问this page对于普通的旧 javascript。这是重要的部分:

var elem = document.getElementById("myDiv");
elem.parentNode.removeChild(elem);

关于li元素的索引

当您在 DOM 中插入列表项时，您还可以像这样设置它的 ID:

function refreshThumbnailsQueue() {
    
    ...
    
    for (var i = 0; i <= queue.length - 1; i++) {
        
        ...
        
        // Create the li.
        var newLi = document.createElement('li');
        newLi.id = "song-" + i;
        
        // Create the onclick listening
        li.onclick = function(){
          
          // Remove from DOM.
          var elem = document.getElementById(this.id);
          elem.parentNode.removeChild(elem);
        
          // We keep only the integer (index)
          // In this example, '5' cuts away the "song-".
          var index = parseInt((this.id+"").substring(5));

          // Then, we remove it from the list. 
          YourProgram.removeIndex(index);
        
        }
        
        ...
        
        thumbnailsUl.appendChild(newLi);
    }
}

这样，你就知道它的索引是什么了。

---

希望对您有所帮助。