Use jquery to remove a div with no children

Question

How can I use jquery to remove a SPECIFIC div that has no children (at least no children that isn't whitespace). E.g.

<div id="outer">
    some content
    <div id="removeme"> 


    </div>
    some more content
</div>

Want to completely remove the div with id="removeme".

Answer 1

I couldn't find a selector that ignores text nodes, so this is the quickest/dirtiest code snippet I could come up with.

$("#header").each(function() { 
    if($(this).children().length < 1) 
        $(this).remove() 
});

Answer 2

You can also use:

$('div:empty').remove();

http://docs.jquery.com/Selectors/empty

Answer 3

To remove the element with id equal to removeme:

$("#removeme").remove();

To remove the element with id equal to removeme only if it is empty:

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

To remove all empty <div>s:

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

EDIT: If it's not empty, but has whitespace:

if($.trim($("#removeme").text()) == "") {
  $("#removeme").remove();
}

Answer 4

I think you want this:

$('div#outer div:empty').remove();

It will remove all the empty divs inside the div#outer node

Answer 5

Could be in effect "Fader out"?

Answer 6

$(document).ready(function() { $('div:empty').remove(); });

looking to use this but it wont work! I look in the source code and it's still there, any ideas? Thanks

Answer 7

I went with:

$('#outer > div').filter(function (index) { 
    return $(this).children().length < 1; 
}).remove();

This says:

• give me all the div children of #outer
• use filter to get rid of any which have child nodes
• remove anything we still have selected

Sadly, this will remove the div if it contains text, which is probably not what the original poster would have wanted. Plain text doesn't count as a child.