I have a series of dynamically created divs set up like this:
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
To filter the results, I am utilizing the following script:
$(document).ready(function(){
$("#search").on("keyup", function()
{
var value = $(this).val().toLowerCase();
$(".child").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
The current setup is functioning as expected. However, I would like to implement a feature where if the search value does not match any of the children in the first div, then the parent div (first div) should also be hidden.