Javascript - 如何替换多个 HTML 节点

Question

我正在构建一个电子邮件构造函数，当用户保存模板时，我只是将 HTML 发送到服务器。但我需要删除 drap & drop 元素才能将其发送到服务器。

我不太擅长 DOM 操作，所以我不知道从哪里开始。

这是我的 HTML：

<table>

  <tbody>

    <tr>

      <th>

        <div class="components-drop-area">

          <p>aa</p>

          <p>bb</p>

        </div>

      </th>

    </tr>

    <tr>

      <th>

        <div class="components-drop-area">

          <p>cc</p>

          <p>dd</p>

        </div>

      </th>

    </tr>

  </tbody>

</table>

我需要删除所有的.components-drop-areadiv。像这样的东西：

<table>

  <tbody>

    <tr>

      <th>

        <p>aa</p>

        <p>bb</p>

      </th>

    </tr>

    <tr>

      <th>

        <p>cc</p>

        <p>dd</p>

      </th>

    </tr>

  </tbody>

</table>

我在这里停止了我的代码：

var table = document.querySelector('table').cloneNode(true)

let dropAreas = table.querySelectorAll('.components-drop-area')

console.log(table, dropAreas)

如何在保留内容的同时循环和删除所需的元素？

Answer 1

一种方法是简单地更换parentNode的innerHTMLs的在.components-drop-area innerHTMLS：let dropAreas = document.querySelectorAll('.components-drop-area');for (let i = 0; i < dropAreas.length; i++) {&nbsp; dropAreas[i].parentNode.innerHTML = dropAreas[i].innerHTML;}// The <div> contents have now been extracted, and the <div> elements removedconsole.log(document.querySelector('table').innerHTML);<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <div class="components-drop-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>aa</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>bb</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <div class="components-drop-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>cc</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>dd</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>

Answer 2

如果要使用 vanilla DOM 操作，则必须从选定的 div 元素中获取每个子元素，并将它们插入到该节点的父元素中，使用选定的 div 本身作为参考，然后再将其删除。每个 DOM 节点都有对其父节点和子节点的引用，因此您可以执行与每个选定节点相关的所有操作，如下所示：&nbsp; for (const node of document.querySelectorAll("table .components-drop-area")) {&nbsp; &nbsp; const parent = node.parentNode;&nbsp; &nbsp; const children = Array.from(node.children);&nbsp; &nbsp; for (const child of children) {&nbsp; &nbsp; &nbsp; node.removeChild(child);&nbsp; &nbsp; &nbsp; parent.insertBefore(child, node);&nbsp; &nbsp; }&nbsp; &nbsp; parent.removeChild(node);&nbsp; }

Answer 3

这是对 James 的 vanilla JS 实现的改编，应该可以工作for (const node of document.querySelectorAll("table .components-drop-area")) {&nbsp; const parent = node.parentNode;&nbsp; while (node.children.length>0) {&nbsp; &nbsp; let child = node.children[0];&nbsp; &nbsp; node.removeChild(child);&nbsp; &nbsp; parent.insertBefore(child, node);&nbsp; }&nbsp; parent.removeChild(node);}循环遍历元素很棘手，因为我们在迭代期间修改了集合for (const node of document.querySelectorAll("table .components-drop-area")) {&nbsp; const parent = node.parentNode;&nbsp; while (node.children.length>0) {&nbsp; &nbsp; let child = node.children[0];&nbsp; &nbsp; node.removeChild(child);&nbsp; &nbsp; parent.insertBefore(child, node);&nbsp; }&nbsp; parent.removeChild(node);}// The <div> contents have now been extracted, and the <div> elements removedconsole.log(document.querySelector('table').innerHTML);<table>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <div class="components-drop-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>aa</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>bb</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>&nbsp; &nbsp; &nbsp; &nbsp; <div class="components-drop-area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>cc</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>dd</p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </th>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>