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())=='')

No it's not, Note that you should not consider line breaks and spaces. @louisdeb — Mohammad Mahdi KouchakYazdi
– Mohammad Mahdi KouchakYazdi, Commented Jun 4, 2016 at 12:10
Possible duplicate of How to check if input file is empty in jQuery — Mohammad Mahdi KouchakYazdi
– Mohammad Mahdi KouchakYazdi, Commented Jan 9, 2019 at 6:32

Pranav C Balan · Accepted Answer · 2016-06-04 11:38:55Z

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 4, 2016 at 11:38

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohammad Mahdi KouchakYazdi Over a year ago

Is this return an array of empty cells ?

Pranav C Balan Over a year ago

@MMKY : jQuery object of empty cells, if you want as array use get() method

Mohammad Mahdi KouchakYazdi Over a year ago

I reached my goal using if(emptyObj.length != 0) { // do sth }

Parvez Rahaman · Accepted Answer · 2016-06-04 12:17:07Z

0

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>

edited Jun 4, 2016 at 12:17

answered Jun 4, 2016 at 12:05

Parvez Rahaman

4,3973 gold badges24 silver badges39 bronze badges

2 Comments

Mohammad Mahdi KouchakYazdi Over a year ago

What's the difference ? is it duplicate answer ?

Parvez Rahaman Over a year ago

@MMKY of course i used the legend but modified by mine.

Collectives™ on Stack Overflow

How to check if an element is empty using jquery?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related