I have two element inside <tr>:
<table>
<tbody>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>
</tbody>
</table>
in the myfunction I want to check if element with cartain class exist or not:
if($(thisElem).closest("tr").find(".input-city").length){
console.log('true')
}
but $(thisElem).closest("tr").find(".input-city").length is always 0 !
how do I check this element existance?
This is to show that the problem is due to the invalid html since tr should be wrapped inside a table like this demo shows:
function myfunction(target){
if($(target).closest("tr").find(".input-city").length){
console.log('true');
}else{
console.log('false');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Working</h1>
<table>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>
</table>
<h1>Not Working</h1>
<tr>
<td><input type="text" class="form-control input-state" onclick="myfunction(this)"></td>
<td><input type="text" class="form-control input-city" onclick="myfunction(this)"></td>
</tr>