How do I check if an HTML element is empty using jQuery

Question

I m trying to call a function only if an HTML element is empty  using jQuery   Something like this   if  isEmpty     element              do something

User · Answer

Here s a jQuery filter based on https   stackoverflow com a 6813294 698289    extend   expr           trimmedEmpty  function el        return    trim   el  html

User · Answer

JavaScript  var el  document querySelector  body     console log el   console log  Empty      isEmptyTag el    console log  Having Children      hasChildren el      function isEmptyTag tag         return  tag innerHTML trim             true   false     function hasChildren tag          return  tag childElementCount     0    true   false      Not For IE       return  tag childNodes length     0    true   false      Including Comments     return  tag children length     0    true   false      Only Elements     try using any of this   document getElementsByTagName  div   0   document getElementsByClassName  topbar   0    document querySelectorAll  div   0   document querySelector  div       gets the first element

User · Answer

jQuery fn doSomething   function          return something with  this         selector empty   doSomething

User · Answer

Try this   if       el   html

User · Answer

If by  empty   you mean with no HTML content   if     element   html                call function

User · Answer

elt hasChildNodes     Yes  I know  this is not jQuery  so you could use this      elt  0  hasChildNodes     Happy now

User · Answer

Empty as in contains no text   if       element   text   length

User · Answer

In resume  there are many options to find out if an element is empty   1- Using html   if     trim    p element   html              paragraph with id  element  is empty  your code goes here     2- Using text   if     trim    p element   text              paragraph with id  element  is empty  your code goes here     3- Using is   empty     if     p element   is   empty             paragraph with id  element  is empty  your code goes here     4- Using length  if      p element   length          paragraph with id  element  is empty  your code goes here     In addiction if you are trying to find out if an input element is empty you can use val   if     trim    input element   val              input with id  element  is empty  your code goes here

User · Answer

White space and line breaks are the main issues with using  empty selector  Careful  in CSS the  empty pseudo class behaves the same way  I like this method   if   someElement children   length    0        someAction

User · Answer

You can try   if    selector   html   toString   replace    g                code here      Replace white spaces  just incase

User · Answer

if     element   html

User · Answer

I found this to be the only reliable way  since Chrome  amp  FF consider whitespaces and linebreaks as elements    if   trim    selector   html

User · Answer

if      element   is   empty         do something     for more info see http   api jquery com is  and http   api jquery com empty-selector   EDIT   As some have pointed  the browser interpretation of an empty element can vary  If you would like to ignore invisible elements such as spaces and line breaks and make the implementation more consistent you can create a function  or just use the code inside of it      function isEmpty  el          return    trim el html          if  isEmpty     element                do something       You can also make it into a jQuery plugin  but you get the idea

User · Answer

document getElementById  id   innerHTML          null   or     element   html            null

User · Answer

Another option that should require less  work  for the browser than html   or children     function isEmpty  el      return  el has      length

User · Answer

Are you looking for jQuery isEmptyObject      http   api jquery com jquery isemptyobject

User · Answer

Line breaks are considered as content to elements in FF    lt div gt   lt  div gt   lt div gt  lt  div gt    Ex      div empty   text  Empty   css  background     ff0000      In IE both divs are considered empty  in FF an Chrome only the last one is empty   You can use the solution provided by  qwertymk  if     S   test     element   html          for one element     alert  empty        or      elements   each function        for many elements     if     S   test   this  html                   is empty

[javascript] How do I check if an HTML element is empty using jQuery?

Examples related to javascript

Examples related to jquery