如何使用JavaScript从DOM集合中移除重复的<li>元素？

方法一：倒序遍历动态集合直接移除 #

HTMLCollection是动态集合，删除DOM元素后会自动从集合中移除，但正向遍历会因集合长度变化导致索引错位，用倒序遍历更稳妥：

let prodMenu = document.getElementsByClassName("productMenu-category");
// 倒序遍历，避免删除元素后索引混乱
for (let i = prodMenu.length - 1; i > 0; i--) {
    if (prodMenu[i].innerHTML === prodMenu[i-1].innerHTML) {
        prodMenu[i].remove(); // 直接移除DOM元素
    }
}

方法二：转成静态数组处理所有重复项（含非相邻） #

如果重复项不一定是相邻的，先把集合转成静态数组，用Set记录已出现的内容，再移除重复元素：

// 把动态集合转成静态数组
let prodMenuArray = Array.from(document.getElementsByClassName("productMenu-category"));
const seenContents = new Set();

prodMenuArray.forEach(item => {
    const content = item.innerHTML;
    if (seenContents.has(content)) {
        item.remove();
    } else {
        seenContents.add(content);
    }
});

注：原代码仅处理相邻重复项，方法二可以处理所有重复的元素，根据实际需求选择即可。

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