js 如何移除DOM节点

parentElement.removeChild(childElement)

myDiv

// HTML: <div id="myDiv">我是一个要被移除的Div</div> <button id="removeBtn">移除</button>

const removeBtn = document.getElementById('removeBtn');
const myDiv = document.getElementById('myDiv');

removeBtn.addEventListener('click', () => {
    // 方式一：使用 remove()，更推荐
    if (myDiv) { // 检查元素是否存在是好习惯
        myDiv.remove();
        console.log('myDiv 已通过 remove() 移除。');
    }

    // 方式二：使用 removeChild()，需要知道父节点
    // 如果你知道myDiv的父节点是body，你可以这样写：
    // if (myDiv && myDiv.parentNode) {
    //     myDiv.parentNode.removeChild(myDiv);
    //     console.log('myDiv 已通过 removeChild() 移除。');
    // }
});

container.innerHTML = '';

null

let someElement = document.getElementById('targetElement');
if (someElement) {
    someElement.remove();
    someElement = null; // 显式解除引用
    console.log('元素已移除并解除引用。');
}

destroy()

cleanup()

parentNode.removeChild(childElement)

removeChild()

const container = document.getElementById('largeContainer');

// 性能较差的直接循环移除
// while (container.firstChild) {
//     container.removeChild(container.firstChild);
// }

// 优化策略：将父元素从文档流中暂时移除，操作完成后再放回去
// 这种方法不适用于清空，更适用于批量修改子元素
// const parent = container.parentNode;
// const nextSibling = container.nextSibling;
// parent.removeChild(container);
// // 在这里对 container 进行大量子元素的移除操作
// while (container.firstChild) {
//     container.removeChild(container.firstChild);
// }
// parent.insertBefore(container, nextSibling);


// 优化策略：使用 DocumentFragment (适用于批量添加，但也可以间接用于优化移除)
// 更直接的批量移除优化，其实是利用父元素脱离文档流的特性
// 比如，你可以先将父元素隐藏 (display: none)，进行移除操作，再显示
// 或者，如果只是清空，最快的还是 innerHTML = ''，但要注意前面说的副作用

// 对于批量移除，更常见的优化思路是：
// 1. 如果是清空所有子元素，且不关心事件监听器，innerHTML = '' 是最快的。
// 2. 如果需要保留事件监听器或者进行更复杂的处理，可以考虑将父元素暂时从DOM中移除，
//    进行批量操作（包括移除），然后重新插入。这样只会触发两次回流。
//    例如：
const parentNode = container.parentNode;
if (parentNode) {
    const tempFragment = document.createDocumentFragment();
    while (container.firstChild) {
        tempFragment.appendChild(container.firstChild); // 将所有子元素移到片段中
    }
    // 此时 container 已经空了，且只触发了一次回流（将所有子元素从 container 移走）
    // 如果目的是彻底移除，那么 tempFragment 就可以被丢弃了，里面的元素会被垃圾回收。
    // 如果是想操作完再放回去，那就在 tempFragment 里操作，最后再 append 到 container。
    console.log('大量DOM节点已通过片段优化移除。');
}