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节点已通过片段优化移除。'); }