JavaScript中根据类名高效移除DOM元素：以表格行为例

<table>
    <tbody id="stuffCarrier">
        <!-- 动态添加的表格行将在此处显示 -->
    </tbody>
</table>
<button id="clearList">清空列表</button>

// 获取tbody元素
const stuffCarrier = document.getElementById("stuffCarrier");

// 示例数据（假设从localStorage或其他地方获取）
const showStuff = [
    ["Apple", 10, 2], // [商品名, 单价, 数量]
    ["Banana", 5, 3],
    ["Orange", 8, 1]
];

// 初始化表格头部
stuffCarrier.innerHTML = `<tr>
<th class="stuffs">数量</th>
<th class="stuffs" style="color:red">商品</th>
<th class="stuffs" style="color:chartreuse">成本</th>
</tr>
`;

// 遍历数据并添加表格行
showStuff.forEach(e => {
    // 为动态添加的行添加 'removeds' 类名
    stuffCarrier.innerHTML += `<tr class="stuffs removeds">
    <td>${e[2]}</td>
    <td style="color:blue">${e[0]}</td>
    <td style="color:white">${e[1] * e[2]}</td>
    </tr>
    `;
});

// 注意：使用 innerHTML += 会导致浏览器重新解析和渲染整个 tbody 的内容，
// 对于大量或频繁的DOM操作，这可能不是最高效的方法。
// 更高效的方式是创建DOM元素并使用 appendChild。

// 假设要移除一个名为 'myElement' 的元素
const myElement = document.getElementById('myElement');
if (myElement && myElement.parentNode) {
    myElement.parentNode.removeChild(myElement);
}

document.getElementById("clearList").onclick = function () {
    const elementsToRemove = document.getElementsByClassName("removeds");
    // 注意：getElementsByClassName 返回的是一个 HTMLCollection，它是“活的”集合。
    // 在循环中直接移除元素会导致集合的长度和索引发生变化，可能跳过一些元素或导致错误。
    // 因此，通常需要将其转换为数组，或者从后往前遍历。
    Array.from(elementsToRemove).forEach(e => {
        // 验证 e.parentElement 是否存在且是 stuffCarrier
        if (e.parentElement === document.getElementById("stuffCarrier")) {
            document.getElementById("stuffCarrier").removeChild(e);
        } else {
            // 如果父元素不是 stuffCarrier，则需要找到其真正的父元素
            e.parentElement.removeChild(e);
        }
    });
    localStorage.removeItem("CarriedStuff"); // 清除相关数据
};

// 获取清空按钮并为其添加点击事件
document.getElementById("clearList").onclick = function () {
    // 获取所有带有 'removeds' 类名的元素
    const elementsToRemove = document.getElementsByClassName("removeds");

    // 将 HTMLCollection 转换为数组，然后遍历并移除每个元素
    Array.from(elementsToRemove).forEach(d => d.remove());

    // 移除 localStorage 中的相关数据（如果存在）
    localStorage.removeItem("CarriedStuff");
};