如何从DOM中删除兄弟元素？

Question

我有这个可以运行的代码：

  a.parentNode.removeChild(a);

我还需要删除这个子元素的前一个兄弟元素，即在它之前的元素。

我该如何更新它？MDN 上有相关的文档吗？

- user656925

---

a.parentNode.removeChild( a.previousSibling ); 的翻译是：移除节点a的前一个兄弟节点。 - Šime Vidas

https://developer.mozilla.org/En/DOM/Node.previousSibling - mVChr

谢谢，人们是把这些东西记住了还是在某个地方引用它，我已经厌倦了不停地搜索并在随机网站上找到它。再次感谢。 - user656925

供日后参考：DOM 参考文档，更具体地说，是 Node 接口。 - Felix Kling

在一定程度上说，这是记忆的问题，但实际上它更多地涉及到学习词汇。在你的问题中，你说“这个孩子之前的兄弟”，而孩子是 a，所以答案是 a.previousSibling。这告诉我你已经大部分掌握了它。 - Douglas

Answer 1

好的，这里有一个解决方案，考虑到前一个同级节点可能不是元素节点：

var previous = a.previousSibling;

// iterate until we find an element node or there is no previous sibling
while(previous && previous.nodeType !== 1) {
    previous = previous.previousSibling;
}

// if there is a sibling, remove it
if(previous) {
    previous.parentNode.removeChild(previous);
}

参考：Node.previousSibling ^[MDN]

你可以轻松地创建一个函数，该函数将给出前一个元素节点。

我在此重复我的评论:

你可以在 MDN 上找到所有 DOM 接口的参考资料，特别是Node 接口。

- Felix Kling

---

我知道这是一个旧的线程，但如果有人发现它，现在浏览器对于Element.remove()的支持已经非常普遍了，所以你可以通过elementVar = elementVar.previousSibling或elementVar.next(Element)Sibling进行导航，一旦你的elementVar到达你想要的元素，就使用elementVar.remove()。也就是说，不再需要获取parentNode了。 - flen

关于flen的评论... 正确的语法是 elementVar.nextSibling(Element);。 - yardpenalty.com

Answer 2

以下代码是用于删除除 .me 之外的所有同级元素。

const node = document.querySelector('.me');
const clone = node.cloneNode(true);

const parentNode = node.parentNode;
parentNode.innerHTML = '';
parentNode.append(clone);

- Soon Khai

---

这是一个很好的解决方案。然而，如果在“.me”上有动画效果，它将会每次重新播放动画。 - Amjad Abujamous

Answer 3

  /**
   * Removes all sibling elements after specified
   * @param {HTMLElement} currentElement
   * @private
   */
  _removeNextSiblings(currentElement) {
    while (!!currentElement.nextElementSibling) {
      currentElement.nextElementSibling.remove();
    }
  }

- Александр Шевченко