如何从 DOM 中删除兄弟姐妹？

Question

我有这个工作代码：

  a.parentNode.removeChild(a);

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

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

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

接口。

Answer 2

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

Answer 3

下面的代码是移除除.me之外的所有兄弟元素

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

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