How to check if an element is empty using jquery?

Question

I want to call a function only if HTML of a td is empty (like td with contenteditable='true'), using jQuery. Note that you should not consider line breaks and spaces. How can i do something only if

<table>
  <tbody>
    <tr>
      <td contenteditable="true">
        <br type="_moz"></br>
      </td>
      <td contenteditable="false">2</td>
      <td contenteditable="false">3</td>
    </tr>
    <tr>
      <td contenteditable="false">4</td>
      <td contenteditable="true">
        <br type="_moz"></br>
      </td>
      <td contenteditable="true">
        <br type="_moz"></br>
      </td>
    </tr>
  </tbody>
</table>

None of the belows works :

if ($('#element').is(':empty')){
  //do something
}

or

if($.trim($("selector").html())=='')

I believe this is a duplicate post. See [here](http://stackoverflow.com/questions/1526873/jquery-if-div-id-has-children) — louisdeb, Jun 04 '16 at 11:42
No it's not, **Note that you should not consider line breaks and spaces**. @louisdeb — Mohammad Mahdi KouchakYazdi, Jun 04 '16 at 12:10
Possible duplicate of [How to check if input file is empty in jQuery](https://stackoverflow.com/questions/25793880/how-to-check-if-input-file-is-empty-in-jquery) — Mohammad Mahdi KouchakYazdi, Jan 09 '19 at 06:32

score 2 · Accepted Answer · answered Jun 04 '16 at 11:38

2

Use filter() method

$('td').filter(function() {
  return $.trim($(this).text()).length == 0;
})

$('td').filter(function() {
  return $.trim($(this).text()).length == 0;
}).css('border', '1px solid red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td contenteditable="true">
        <br type="_moz">
      </td>
      <td contenteditable="false">2</td>
      <td contenteditable="false">3</td>
    </tr>
    <tr>
      <td contenteditable="false">4</td>
      <td contenteditable="true">
        <br type="_moz">
      </td>
      <td contenteditable="true">
        <br type="_moz">
      </td>
    </tr>
  </tbody>
</table>

answered Jun 04 '16 at 11:38

Pranav C Balan

113,687
23
165
188

Is this return an array of empty cells ? – Mohammad Mahdi KouchakYazdi Jun 04 '16 at 11:46
@MMKY : jQuery object of empty cells, if you want as array use `get()` method – Pranav C Balan Jun 04 '16 at 11:47
1

I reached my goal using `if(emptyObj.length != 0)` { // do sth } – Mohammad Mahdi KouchakYazdi Jun 04 '16 at 11:58

Parvez Rahaman · Answer 2 · 2016-06-04T12:17:07.393

One more..

$('td').each(function() {
  if(!$(this).text().trim().length){
      $(this).css('border', '1px solid black');
  }
});

$('td').each(function() {
  if(!$(this).text().trim().length){
      $(this).css('border', '1px solid black');
  }
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tbody>
        <tr>
          <td contenteditable="true">
            <br type="_moz">
          </td>
          <td contenteditable="false">2</td>
          <td contenteditable="false">3</td>
        </tr>
        <tr>
          <td contenteditable="false">4</td>
          <td contenteditable="true">
            <br type="_moz">
          </td>
          <td contenteditable="true">
            <br type="_moz">
          </td>
        </tr>
      </tbody>
    </table>

What's the difference ? is it duplicate answer ? – Mohammad Mahdi KouchakYazdi Jun 04 '16 at 12:09 — Mohammad Mahdi KouchakYazdi, Jun 04 '16 at 12:09
@MMKY of course i used the legend but modified by mine. – Parvez Rahaman Jun 04 '16 at 12:11 — Parvez Rahaman, Jun 04 '16 at 12:11

How to check if an element is empty using jquery?

2 Answers2