javascript - 是否可以删除某种类型的子元素？

Question

我正在尝试制作一个与调查有关的简单网站（例如进行调查、发布、回答、查看回复等），但我有一个需要大量代码才能解决的问题，并且涉及硬编码。我正在尝试一次性从 div 父元素中删除所有 br 子元素，例如一行代码或最多两行。

如您所见，该父 div 中有很多 br 标签。我想要一行或双行代码，可以一次性删除所有这些 br 标签。所以最后它应该是这样的：

谢谢！

标签： javascripthtmlcsselementchildren

Answer 1

您需要迭代父节点的子节点，然后可以element.parentNode.removeChild(element)在条件适用时使用：

const parentElement = document.getElementById('parent');
[...parentElement.children].forEach((element) => {
  if (element.tagName === 'BR') {
    element.parentNode.removeChild(element);
  }
});

<div id="parent">
  <div>foo</div>
  <br>
  <br>
  <br>
  <span>bar</span>
  <br>
  <br>
  <br>
  <div>baz</div>
</div>

请注意，您不能迭代 HTML 属性children（类似于classList）。做到这一点的诀窍就是简单地spread（即[...foo]）