如何检测子元素是否存在指定data-id？避免收藏列表重复项

问题根源 #

每次调用displayListItem时，都会遍历整个收藏数组并将所有项重新添加到DOM中，导致已存在的条目被重复插入。

修复方案（两种可选） #

方案一：渲染前清空列表（推荐） #

修改displayListItem函数，每次渲染前先清空收藏列表的DOM内容，再重新渲染最新的收藏项，从根源避免重复：

const displayListItem = function () {
  // 清空现有列表内容
  pokemonList.innerHTML = '';
  favourite.forEach((listItem) => {
    addToList(listItem);
  });
};

方案二：添加前检查DOM是否已存在该项 #

修改addToList函数，在插入新条目之前，先检查DOM中是否已有对应ID的元素，存在则跳过添加：

const addToList = function ({ name, id }) {
  // 检查是否已存在该ID的列表项
  if (document.getElementById(id)) {
    return;
  }
  let html1 = `
  <li class="list-item" data-id="${id}" id="${id}">
  ${name}
  <span>&nbsp;</span>
  <button class="btn-remove">remove</button>
  </li>
  `;
  pokemonList.insertAdjacentHTML('beforeend', html1);
};

额外优化点 #

当前点击事件中调用displayListItem(favourite)，但函数定义未接收参数，可统一为：

const displayListItem = function (items) {
  pokemonList.innerHTML = '';
  items.forEach((listItem) => {
    addToList(listItem);
  });
};

调用时直接传入更新后的数组：

displayListItem(favourite);

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