如何删除空的 html 元素及其子元素？ (jQuery)答案

【问题标题】：How to remove empty html elements and their children? (jQuery)如何删除空的 html 元素及其子元素？ (jQuery)
【发布时间】：2015-12-14 14:27:18
【问题描述】：

我有几个帖子，它们生成空的 html 标签，里面有空的子标签。

如何删除这些空的 html 标签及其子标签？

<div class="single-book-info">
     <div>
          <p></p>
           <p></p> 
     </div>

     <p>
        <code>
           <br>
        </code>
     </p>

     <ul>
        <li>text 1</li>
        <li>text 2</li>
        <li>text 3</li>
     </ul>

<div>

我想要的结果是：

<div class="single-book-info">
     <ul>
        <li>text 1</li>
        <li>text 2</li>
        <li>text 3</li>
     </ul>

<div>

【问题讨论】：

我有一个漂亮的答案，但你必须展示你的尝试
@Tushar 现在这是个好政策
把条件放在那里..如果你的数据是空白或 null 或 undefined ，不要附加它。
由于以下答案不正确（仅适用于给定结构），请参阅Demo

标签： javascript jquery html css

【解决方案1】：

这可能会为您删除必要的代码：

$('div.single-book-info').children('div, p').remove()

但您也可以检查它们是否为空，然后将其删除。

【讨论】：

嗨@Abhay，感谢您的回答。我现在能够解决它

【解决方案2】：

如果要使用正则表达式，请将 html 代码作为字符串。然后删除标签之间的间距并尝试使用

[<[a-zA-Z\s"-=]+>]*[a-zA-Z\s0-9]+[<\/[a-zA-Z\s"-\/=]+>]*

这种正则表达式。最好先在这里尝试https://regex101.com/。

【讨论】：