How to hide table row if input is empty?

Question

How can I make Jquery to detect if the input field inside the table is empty?

If inputs are empty I would to like to hide the row. How can I do it? I manage to hide the row if the input weren't inside the row.

<table id="entryTable">
<tr>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Age</th>
<tr>
<tr>
 <td><input type="text" name="f_name" /></td>
 <td><input type="text" name="l_name" /></td>
 <td><input type="text" name="age" /></td>
</tr>
<tr>
 <td><input type="text" name="f_name" /></td>
 <td><input type="text" name="l_name" /></td>
 <td><input type="text" name="age" /></td>
</tr>
</table>

$('#entryTable tr').each(function() {
    if ($(this).find('td:empty').length) $(this).remove();
});

Carsten Løvbo Andersen · Accepted Answer · 2021-08-06 06:29:29Z

You can try something like this:

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

Problem is that none of your td is empty because of the input.

Demo

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="entryTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
    <tr>
      <td><input type="text" name="f_name" /></td>
      <td><input type="text" name="l_name" value="name" /></td>
      <td><input type="text" name="age" /></td>
    </tr>
  </tbody>
</table>

Navin Solanki · Accepted Answer · 2021-08-06 13:28:12Z

$('#entryTable tbody tr').each(function() {
  var n = $(this).find("td").filter(function() {
    if ($("input", this).length) 
    return $("input", this).val().length == 0;
    return $(this).text().length == 0
  })
  if (n.length == $(this).find("td").length) $(this).remove();
});

tabel,tr,td{
border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="entryTable">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
    </tr>
      <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
      
      <tr>

          <td><input type="text" name="f_name" /></td>
          <td><input type="text" name="l_name" /></td>
          <td><input type="text" name="age" /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
        <tr>
          <td><input type="text" name="f_name" value="do" /></td>
          <td><input type="text" name="l_name" value="not" /></td>
          <td><input type="text" name="age"  /></td>
      </tr>
</table>

Collectives™ on Stack Overflow

How to hide table row if input is empty?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related