CODEWITHSUNDEEP
javascriptjquery
Yunus Aslam
Yunus Aslam

Reputation: 2466

jQuery Remove elements where the content is empty

I want to remove the elements where there is no content. For example this is my HTML markup:

I have the html markup in a jquery variable say var myhtml and I am not sure of any specific tags in it.

<h1>
    <u>
        <strong></strong>
    </u>
    <u>
        <strong>Read This Report Now
            <strong></strong> ??
        </strong>
    </u>
</h1>

As we can see that above markup

<u>
    <strong></strong>
</u>

is empty and hence this should be removed from the markup. Say I have the above markup in a variable myhtml. How can I do this?

I am not sure if the element will be either

"<u>" or "<em>" or "<i>" or "<div>" or "<span>"

.. It can be anything.

Upvotes: 8

Views: 3953

Answers (6)

PeterKA
PeterKA

Reputation: 24638

If your html is already in a variable myhtml here is how you would do it:

$('*', myhtml).filter(function() {
    return $(this).text() == '';
}).remove();

Upvotes: 0

SnakeDrak
SnakeDrak

Reputation: 3642

You can search all elements and remove which is empty.

$('*').each(function(){ // For each element
    if( $(this).text().trim() === '' )
        $(this).remove(); // if it is empty, it removes it
});

See how works!: http://jsfiddle.net/qtvjj3oL/

UPDATED:

You also can do it without jQuery:

var elements = document.getElementsByTagName("*");

for (var i = 0; i < elements.length; i++) {
    if( elements[i].textContent.trim() === '' )
        elements[i].parentNode.removeChild(elements[i]);
}

See jsfiddle: http://jsfiddle.net/qtvjj3oL/1/

UPDATED 2:

According to your comment, you have the html in a variable, you can do it:

// the html variable is the string wich contains the html
// We make a fake html
var newHtml = document.createElement('html');
var frag = document.createDocumentFragment();
newHtml.innerHTML = html;
frag.appendChild(newHtml);

var elements = newHtml.getElementsByTagName("*");

// Remove the emptys elements
for (var i = 0; i < elements.length; i++) {
    if( elements[i].textContent.trim() === '' )
        elements[i].parentNode.removeChild(elements[i]);
}

html = newHtml.innerHTML; // now reset html variable

It works: http://jsfiddle.net/qtvjj3oL/6/

Upvotes: 9

Balachandran
Balachandran

Reputation: 9637

try

 $("u").each(function () {      // if remove all, you can select all element $("*")           
    var x = $(this).text().trim();
    if (x == "") {
        $(this).remove();
    }
});

IF you want remove everything simply you can use empty selector then remove it

DEMO

Upvotes: 6

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

You can use .filter() and remove() for this

$('*').filter(function() {
    return $(this).text().trim() == ""
}).remove();

Upvotes: 1

Liam
Liam

Reputation: 2837

simply:

$( ":empty" ).remove();

or

$( "u:empty" ).remove();

if specific

Upvotes: 1

ITChristian
ITChristian

Reputation: 11271

JQuery

It searches all elements and remove all blank elements (ie: <span></span>), all elements which contains a simple space (ie: <span> </span>) and all elements which contains only a &nbsp; (ie: <span>&nbsp;</span>)

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

DEMO: http://jsfiddle.net/7L4WZ/389/

Upvotes: 1

Related Questions