javascript - 如何解开元素？

Question

这个问题在这里已经有了答案:





How can I remove wrapper (parent element) without removing the child?

(7 个回答)


去年关闭。




有没有一种使用JavaScript“打开一个div”的方法(删除父节点但保持其子节点不变)？
我的意思是改变这一点:

<div class="parent">
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
</div>

对此:

<div class="parent">
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
    <div class="grandchild"></div>
</div>

不幸的是，我无法访问 HTML，所以我想我可以在网页加载后使用 JavaScript 来实现这个结果。
到目前为止，我有:

const children = document.querySelectorAll('.child');
children.forEach(child => //not sure what to do next);

Answer 1

删除元素但保留其子节点通常称为 “展开” .
有一个很方便的Element.replaceWith()方法:

document.querySelectorAll(".child")
  .forEach(EL => EL.replaceWith(...EL.childNodes));

.child { padding: 5px; background: gold; }
.grandchild { padding: 10px; background:#eee; margin: 5px 0;}

<div class="parent">
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
    <div class="child">
        <div class="grandchild"></div>
        <div class="grandchild"></div>
        <div class="grandchild"></div>
    </div>
</div>