删除元素

Question

我有以下HTML标记：

<div class="content"> 
<h1 class="entry-title"><span>Bedrooms </span><br>Simona <br>Oasis</h1>

<p>The five swank bedrooms at Simona Oasis &amp; Spa are the last word in understated luxury. Positioned in secluded spots throughout the estate, privacy is ensured, as is easy access to the central living pavilion. Gazillion-thread count sheets make sleeping a sensual experience while the large private bathrooms create a tastefully contained space. The rooms feature cool marble floors, bar fridge, TV and DVD, chic tropical furnishings and beautiful outlooks onto verdant jungle.</p>
<h2 style="clear: both;">Darma</h2>
<p>    </p><p>The stunning wrap-around balcony overlooking two tranquil streams marks the Darma suite as the estate’s premier bedroom. Huge windows and sacred-spring-fed water features flank the Balinese doors that welcome you inside. Darma has a separate dressing room, a desk plus a soft sofa and comfortable chairs facing a TV and DVD and overlooking the garden and pool. The enormous bathroom has a fabulous central jacuzzi set under a curtained <span style="font-style: italic;">balé</span>, twin sinks and a large rain shower. Chill on the furnished balcony and listen to music, read or soak up the tropical ambiance.</p>
<p></p>
<p><img src="Darma-Bedroom.jpg" alt="Darma bedroom"><br>
</p><h2>Bima</h2>
<p>
</p><p>Tucked into a quiet corner of Simona Oasis &amp; Spa is this sweet room that has a pretty furnished balcony overlooking flowering gardens. The ‘opium’ style queen-size bed is sumptuously cushioned, and backed by sliding woven panels that open – or close – to the private bathroom where a freestanding bathtub overlooks flowering hibiscus and a manicured walled garden. Volcanic stone accents the floors and wall motifs highlight this stylish Balinese-style bathroom that is complete with a rain shower and twin sinks. Back in the bedroom, a sofa is poised for watching DVDs in air-conditioned comfort.</p>
<p></p>
<p><img src="Bima-Bedroom.jpg" alt="Bima bedroom"><br>
</p><h2>Sahedewa</h2>
<p>
</p><p>Closer to the central living pavilion is this beautiful riverside bedroom that features corner windows where you can lose yourself while gazing out over the river and into the equatorial forest from a cushioned sofa. The queen-size bed is backed by sliding panels to the bathroom where an open-air shower is perfect for lavations under the stars and a freestanding tub sits amid black volcanic stones. The bathroom has a relaxing undercover daybed and a bar fridge.</p>
<p></p>
<p><img src="Sahadewa-Bedroom.jpg" alt="Sahadewa bedroom"><br>
</p><h2>Nakula</h2>
<p>
</p><p>The carved Balinese doors to Nakula are directly opposite Sahadewa, making this riverside suite of two bedrooms perfect for families. Stylish cane twin beds are side by side, and a matching ‘opium’ style sofa lies in front of the TV and DVD. Large windows overlook the jungle and river. The connected bathroom has a freestanding travertine tub in a small walled garden with open-air shower, undercover daybed, twin sinks and bar fridge.</p>
<p></p>
<p><img src="Nakula-Bedroom.jpg" alt="Nakula bedroom"><br>
</p><h2>Arjuna</h2>
<p>
</p><p>Beyond Sahedewa and Nakula, the Arjuna bedroom has a private entrance and a lush lawn fringed with opulent gardens, pathways to the spa and a divine private curtained <span style="font-style: italic;">balé</span> overlooking the river. Ideal for couples wanting a romantic hideaway, Arjuna has a furnished terrace and an elegant interior with a queen-size bed at the centre of the room. Sliding panels open to the bathroom, which features a large walled garden, freestanding tub, double vanity and rain shower housed behind an opaque glass door.</p>
<p></p>
<p><img src="Arjuna-Bedroom.jpg" alt="Arjuna bedroom"></p>
<div class="twoButtons">
    <a class="button availability" href="availability-calendar.html">Availability</a><a class="button book" href="reservations.html">Book now</a>
</div>
<div class="pagenav-wrap">
    <div class="next"><a href="living-areas.html" rel="next">Next post in category</a></div>    
    <div class="prev"><a href="villa-layout.html" rel="prev">prev post in category</a></div>
</div>

我想删除该内容上的空p标记

我已经使用其中一些方法删除了这些：

没有。 1

$('.content').find('p:empty').remove();

没有。 2

$(document).ready(function(){
        $('.content p:empty').each(function(index){
            if($(this)){
                console.log('true');
                console.log(index + ': ' + $(this).text());
                $(this).css({'display': 'none'});
            }
            else{
                console.log('false');
                console.log(index + ': ' + $(this).text());
            }
        });
    });

它的工作但不完美，这些代码只返回5个p标签。 这应该是10个空的p标签

请帮我解决这个问题。

提前感谢。

Answer 1

:empty不会包含带有空格的标记，请尝试filter()

$('.content p').filter(function(){
    var $this = $(this), 
        hasChildren = $this.children().length,
        hasText = $.trim($this.text()).length;
    return !hasText && !hasChildren;       
}).remove()

Answer 2

试试这个：

$('.content p').filter(function(){
    return ($.trim($(this).text()).length == 0) && ($(this).children().length == 0);
}).remove();

Answer 3

试试这个：

$('p').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s| /g, '').length == 0)
        $this.remove();
});