如何正确移除DOM中所有嵌套的<child>自定义标签

问题原因 #

getElementsByTagName 返回的是实时HTML集合，DOM结构变化时集合会自动更新。你删除父级<child>节点时，其内部嵌套的<child>会自动从集合中移除，集合长度动态缩短，正向遍历的索引就会错位，最终导致部分节点漏删。

解决方案 #

方案1：将实时集合转为静态数组遍历

把动态的HTML集合转成普通JS数组，数组长度是固定的，不受后续DOM操作影响，哪怕节点已经被父节点连带删除，调用已不存在节点的remove方法也不会报错。

const html = document.createElement('div');
html.innerHTML = this.item.Body;
// 把实时HTML集合转成静态数组
const childTags = Array.from(html.getElementsByTagName('child'));

childTags.forEach(childTag => {
  childTag.remove();
});

this.item.Body = html.innerHTML;

方案2：倒序遍历实时集合

无需转数组，直接从最后一个元素开始倒序遍历，删除操作只会影响已经遍历过的后序索引，不会干扰前面未遍历的元素。

const html = document.createElement('div');
html.innerHTML = this.item.Body;
const childTags = html.getElementsByTagName('child');

// 倒序遍历
for (let i = childTags.length - 1; i >= 0; i--) {
  childTags[i].remove();
}

this.item.Body = html.innerHTML;

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