Question

所以我正在为youtube做一个播放列表管理器（使用ytb api），对于我正在做的图形部分，例如youtube，给出了给定播放列表中每个缩略图的列表。我使用HTML＆＃39; ul＆＃39;并将每个缩略图添加为＆＃39; li＆＃39;。一切都运行正常，但想添加一个功能，以便用户可以点击其中一个缩略图将其从播放列表中删除。

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

我使用数组作为队列来存储将要播放的每个视频ID（这是播放列表）： var queue = []

对于缩略图列表，我使用此功能：

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所有的孩子，然后用我的队列var中的每个视频ID缩略图填充它。

正如您所看到的，有一个removeFromQueue（）函数在代码中的每个li上调用onclick事件，这就是我尝试编写的代码。基本上，如果你点击第三个li，它应该删除我的队列变量的第三个元素。

如果您有任何想法，请告诉我。（顺便说一句，对不起，英语不是我的主要语言）

谢谢！

注意：我不想使用jQuery。

Answer 1

将要移除的元素的索引移至removeFromQueue()，例如removeFromQueue(i)。然后从queue删除该项目。

function removeFromQueue(index) {
  queue.splice(index, 1)
  refreshThumbnailsQueue()
}

Answer 2

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

＆＃13;

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

＆＃13;

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

您还可以访问this page以获取普通的旧JavaScript。这是重要的部分：

＆＃13;

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

＆＃13;

至于li元素的索引

当你在DOM中插入列表项时，你也可以像这样设置它的ID：

＆＃13;

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);
    }
}

＆＃13;

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

希望它有所帮助。

单击HTML <li>删除数组元素

2 个答案:

至于li元素的索引

单击HTML <li>删除数组元素

2 个答案:

至于li元​​素的索引

至于li元素的索引