移除重复li-index属性的div元素问题排查与解决

问题根源 #

• 每次调用favoriteLoadItems时，直接往.library-favorite-container中追加新元素，未先清除容器内已有的内容，导致重复渲染相同收藏项。
• 缺少重复校验逻辑：插入新元素前未检查页面中是否已存在对应li-index（即音乐ID）的元素，即便容器未清空，也会重复添加。

方案一：渲染前清空容器（简单高效） #

每次渲染收藏列表前，先清空容器内所有旧元素，再重新渲染最新的收藏项，从根源避免重复。修改后的函数代码如下：

function favoriteLoadItems() {
  const resultsFAV = document.querySelector(".library-favorite-container");
  // 清空容器内已有元素
  resultsFAV.innerHTML = '';
  
  const favoritIt = allMusic.filter(x => x.status === "favorite");
  for (let i = 0; i < favoritIt.length; i++) {
    let resultFAV =
      `<div class="library-favorite-item" li-index="${favoritIt[i].id}" onclick="clickedSingle(this)">
          <div class="library-favorite-data">
            <h1>${favoritIt[i].name}</h1>
            <span>${favoritIt[i].artist}</span>
          </div>
          <audio class="${favoritIt[i].src}" src="songs/${favoritIt[i].src}.mp3"></audio>
         <i class="fa-heart fa-regular"></i>
       </div>`;
    resultsFAV.insertAdjacentHTML("afterbegin", resultFAV);
  }
  favoriteItemsNumber.innerText = $('.library-favorite-item').length;
}

方案二：插入前检查元素是否存在（适合局部更新场景） #

如果不需要全量刷新容器，仅添加新增的收藏项，可以在插入前检查页面中是否已有对应ID的元素，不存在才执行插入：

function favoriteLoadItems() {
  const resultsFAV = document.querySelector(".library-favorite-container");
  const favoritIt = allMusic.filter(x => x.status === "favorite");
  
  for (let i = 0; i < favoritIt.length; i++) {
    const musicId = favoritIt[i].id;
    // 检查页面中是否已存在该ID的收藏项
    const existingItem = document.querySelector(`.library-favorite-item[li-index="${musicId}"]`);
    if (existingItem) continue; // 已存在则跳过
    
    let resultFAV =
      `<div class="library-favorite-item" li-index="${musicId}" onclick="clickedSingle(this)">
          <div class="library-favorite-data">
            <h1>${favoritIt[i].name}</h1>
            <span>${favoritIt[i].artist}</span>
          </div>
          <audio class="${favoritIt[i].src}" src="songs/${favoritIt[i].src}.mp3"></audio>
         <i class="fa-heart fa-regular"></i>
       </div>`;
    resultsFAV.insertAdjacentHTML("afterbegin", resultFAV);
  }
  favoriteItemsNumber.innerText = $('.library-favorite-item').length;
}

额外优化建议 #

1. 遵循HTML自定义属性规范，将li-index改为data-music-id，避免潜在的兼容性问题。
2. 若allMusic数组中存在ID重复的项，可先对收藏项数组去重：

   const favoritIt = allMusic.filter(x => x.status === "favorite");
   // 基于ID去重，保留唯一项
   const uniqueFavorites = [...new Map(favoritIt.map(item => [item.id, item])).values()];
   

   之后遍历uniqueFavorites进行渲染即可。

内容的提问来源于stack exchange，提问作者Adam Hunter