javascript - jquery解开多个递归节点

Question

我正在尝试删除所有具有“toBeRemoved”类的 div，但我不太确定如何去做。我研究了 unwrap，但无法接近我正在寻找的东西。

是否可以轻松地从此:

<div class="toBeRemoved">
    <div class="toBeRemoved">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="toBeRemoved">
                            <div class="toBeRemoved">
                                <div style="text-align: left;">
                                    <div class="toBeRemoved">
                                        <div class="toBeRemoved">
                                            First node
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="toBeRemoved">
        <table>
            <tbody>
                <tr>
                    <td>
                        <div class="toBeRemoved">
                            <div class="toBeRemoved">
                                <div style="text-align: left;">
                                    <div class="toBeRemoved">
                                        <div class="toBeRemoved">
                                            Second node.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

至

<table>
    <tbody>
        <tr>
            <td>
                <div style="text-align: left;">
                    This needs to be kept
                </div>
            </td>
        </tr>
      </tbody>
    </table>
    <table>
      <tbody>
        <tr>
            <td>
                <div style="text-align: left;">
                    This needs to be kept
                </div>
            </td>
        </tr>
      </tbody>
</table>

Answer 1

将每个 .toBeRemoved 元素替换为其直接子元素:

$('.toBeRemoved').each(function() {
  $(this).replaceWith($(this).children());
});

Fiddle