如何在JavaScript中只删除父元素而不删除其子元素？

Question

让我们说:

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

对此:

<div>
  pre text
  <p>child foo</p>
  <p>child bar</p>
  nested text
  post text
</div>

我一直在想使用Mootools,jQuery甚至(原始)JavaScript,但无法理解如何做到这一点.

Answer 1

使用jQuery你可以这样做:

var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);

快速链接到文档:

• contents():jQuery
• replaceWith(content:[ String | Element | jQuery ]):jQuery

Answer 2

与库无关的方法是在删除之前插入要在其自身之前删除的元素的所有子节点(隐式地将它们从旧位置移除):

while (nodeToBeRemoved.firstChild)
{
    nodeToBeRemoved.parentNode.insertBefore(nodeToBeRemoved.firstChild,
                                            nodeToBeRemoved);
}

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

这将以正确的顺序将所有子节点移动到正确的位置.

Answer 3

您应该确保使用DOM执行此操作,而不是innerHTML(如果使用jk提供的jQuery解决方案,请确保它移动DOM节点而不是innerHTML在内部使用),以便保留事件处理程序之类的内容.

我的答案很像insin,但是对于大型结构会表现得更好(单独追加每个节点可能会对重绘必须重新应用每个节点的费用appendChild;对于a DocumentFragment,这只会发生一次因为它直到它之后才会显示所有子项都被附加,并将其添加到文档中).

var fragment = document.createDocumentFragment();
while(element.firstChild) {
    fragment.appendChild(element.firstChild);
}
element.parentNode.replaceChild(fragment, element);

Answer 4

 $('.remove-just-this > *').unwrap()

Answer 5

更优雅的方式是

$('.remove-just-this').contents().unwrap();

Answer 6

将 div 替换为其内容：

const wrapper = document.querySelector('.remove-just-this');
wrapper.outerHTML = wrapper.innerHTML;

<div>
  pre text
  <div class="remove-just-this">
    <p>child foo</p>
    <p>child bar</p>
    nested text
  </div>
  post text
</div>

Answer 7

使用现代JS！

const node = document.getElementsByClassName('.remove-just-this')[0];
node.replaceWith(...node.childNodes); // or node.children, if you don't want textNodes

oldNode.replaceWith(newNode) 有效的ES5

...array 是散布运算符，将每个数组元素作为参数传递