How to hide table row if input is empty? - html

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();
});​

Answer 1

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>

Answer 2

$('#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>