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

让我们说:

  pre text
  

    
child foo
    
child bar
    nested text
  
  post text

对此:

  pre text
  
child foo
  
child bar
  nested text
  post text

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

1> jk...：

---

使用jQuery你可以这样做:

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

快速链接到文档:

contents():jQuery

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

---

'cnt'有什么意义？

2> Jonny Buchan..：

---

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

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

nodeToBeRemoved.parentNode.removeChild(nodeToBeRemoved);

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

---

Modern JS支持这个:`node.replaceWith(... node.childNodes);`

3> eyelidlessne..：

---

您应该确保使用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);

4> campino2k..：

---

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

5> 小智..：

---

更优雅的方式是

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

---

最佳答案.谢谢.

6> Gibolt..：

---

使用现代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 是散布运算符，将每个数组元素作为参数传递