如何在 JavaScript 中使用单个函数删除多个 DOM 元素？

Question

我正在开发一个项目，需要从页面中删除多个 DOM 元素。有时我需要删除单个元素，有时我需要删除元素集合（例如 NodeList 或 HTMLCollection）。为了简化我的代码，我想编写一个可以处理这两种情况的函数。

我想出了以下功能：

function removeElement(element) {
    if (element instanceof NodeList || element instanceof HTMLCollection) {
        // If the element is a NodeList or HTMLCollection, iterate over its elements and remove each one
        element.forEach(e => e.remove());
    } else {
        // Otherwise, assume it's a single DOM element and directly call remove() on it
        element.remove();
    }
}

我尝试编写一个函数来处理单个 DOM 元素和元素集合（NodeList 或 HTMLCollection）的删除。这是我想出的功能：

javascript

function removeElement(element) {
    if (element instanceof NodeList || element instanceof HTMLCollection) {
        // If the element is a NodeList or HTMLCollection, iterate over its elements and remove each one
        element.forEach(e => e.remove());
    } else {
        // Otherwise, assume it's a single DOM element and directly call remove() on it
        element.remove();
    }
}

我希望这个函数足够通用，能够处理我的项目中需要从 DOM 中删除元素的不同场景。具体来说，我想要一个无论我处理单个元素还是多个元素都可以工作的单个函数。

用法示例：

// Removing a single element
const singleElement = document.querySelector('#singleElement');
removeElement(singleElement);

// Removing multiple elements
const multipleElements = document.querySelectorAll('.multipleElements');
removeElement(multipleElements);

Answer 1

HTMLCollection

和

NodeList

都实现了类数组接口，而元素则没有。

您可以使用这些知识来区分值的类型，以便迭代和删除集合中的项目 - 或删除单个元素。下面是一个迭代时遵循 MDN 建议的示例：

HTML DOM 中的

HTMLCollection

已生效；当基础文档发生更改时，它会自动更新。因此，最好制作一个副本（例如，使用

Array.from

）来迭代添加、移动或删除节点。

— https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

功能

remove

如下：

如果出现
• falsy 值，会提前返回（例如，来自 null

   API 的 

  querySelector 结果），否则…
• 在该值具有属性的情况下

  length

  它应该是类似数组的，并且在迭代删除之前将项目收集到静态数组中，否则......
• 调用该值的

  remove

  方法

您可以选择“运行代码片段”按钮来重新加载演示，以便以不同的顺序尝试按钮。

function remove(removable) {
  if (!removable) return;
  if ("length" in removable) {
    for (const element of Array.from(removable)) element.remove();
  } else removable.remove();
}

// Removing a single element
document.getElementById("removeSingle").addEventListener("click", () => {
  const singleElement = document.querySelector("#singleElement");
  remove(singleElement);
});

// Removing multiple elements
document.getElementById("removeMultipleNL").addEventListener("click", () => {
  const nodeList = document.querySelectorAll(".multipleElements");
  remove(nodeList);
});

document.getElementById("removeMultipleHC").addEventListener("click", () => {
  const htmlCollection = document.getElementsByClassName("multipleElements");
  remove(htmlCollection);
});

body { font-family: sans-serif; }
#singleElement { color: red; }
.multipleElements { color: blue; }

<div>
  <button id="removeSingle">Remove single</button>
  <button id="removeMultipleNL">Remove multiple as NodeList</button>
  <button id="removeMultipleHC">Remove multiple as HTMLCollection</button>
  <div id="singleElement">single</div>
  <div class="multipleElements">multiple</div>
  <div class="multipleElements">multiple</div>
</div>

TypeScript Playground 中的代码