How to hide element inside of the parent div

Try this:

$(this).parents(".menu-item-wrapper").find('.menu-item-category').hide()

@REALRANDYALLEN - This works but only for the first one only. The rest of the wrappers does not work.

@PICKAB00 - I tested it locally and it works for multiple instances - there must be something else going on to cause it to fail - either the structure is different than what I'm expecting or something when you handle a search

@REALRANDYALLEN - How is your structure? Here is my full code of jquery,

jQuery(document).ready(function($){

        $('.live-search .col-md-6').each(function(){
            $(this).attr('data-search-term', $(this).text().toLowerCase());
        });

        $('.live-search-box').on('keyup', function(){

            var searchTerm = $(this).val().toLowerCase();

            $('.live-search .col-md-6').each(function(){

                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
                    $(this).show();
                  
                    $(this).parents(".menu-item-wrapper").find('.menu-item-category').hide();
                } else {
                    $(this).hide();
                   
                }



            });

        });

    });

@PICKAB00 - I think this is what you want:

    jQuery(document).ready(function ($) {
        $('.live-search .col-md-6').each(function () {
            $(this).attr('data-search-term', $(this).text().toLowerCase());
        });

        $('.live-search-box').on('keyup', function () {
            var searchTerm = $(this).val().toLowerCase();

            $('.live-search .col-md-6').each(function () {
                // reset everything
                $(this).show();
                $(this).parents(".menu-item-wrapper").find('.menu-item-category').show();

                if (searchTerm.length < 1) return;
                
                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length == 0) {
                    $(this).hide();
                    $(this).parents(".menu-item-wrapper").find('.menu-item-category').hide();                   
                }
            });
        });
    });

@REALRANDYALLEN - This works perfectly. Just one issue. I want to hide the rest of the category headings. But leave the currently search result related category.

I want to do this so I can put in to an inner div if the result is 0 "No result found" or something. Also to clean up the view as there are a lot of categories.

@PICKAB00 - I'm not sure I follow you, anything that has a search result the category header should be visible. By the way, looking at this a second time, this is a better structure:

        $('.live-search-box').on('keyup', function () {
            // reset everything
            $('.live-search .col-md-6').show();
            $('.menu-item-category').show();

            var searchTerm = $(this).val().toLowerCase();

            if (searchTerm.length < 1) return;

            $('.live-search .col-md-6').each(function () {
                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length == 0) {
                    $(this).hide();
                    $(this).parents(".menu-item-wrapper").find('.menu-item-category').hide();                   
                }
            });
        });

@REALRANDYALLEN - The above does not display any results now. What I meant was, your previous code worked fine. But I wanted to remove all the category headers hide and show only the category header which belongs to the result. Like if the result is "green tea" and the header is "Tea's" then show only "Tea's" and remove all the rest. I mean keep the headers which belongs to the search results only. Hope this makes more sense. I am bad at explanations though it makes sense in my head.

@PICKAB00 - It does make sense, it's just odd because in my local demo that's exactly what's happening :) Perhaps our html is setup different? Maybe you should post an example of that as well with multiple categories as an example

@REALRANDYALLEN - Okay please don't hate me for this. And sorry for the wasted time. It was an issue on my end. I forgot just a tiny bit of class to be added. But here is the results I am getting with the corrected version just the same as the above. I mean your code (the one before the optimized one). And the HTML (the corrected version).

https://ibb.co/B2XKsHW

Again, so sorry!

@PICKAB00 - Haha no worries, glad you got it working :) Please mark the thread as solved

@REALRANDYALLEN - Actually there is an issue still. The above comment. I have attached an image too. The category header does not show up for some reason. But for the second one it does.

@REALRANDYALLEN - Here is the issue with some more detail. I do not know what is going on here. Here is the image of it without any input/searches. So this is how it looks like by default.

https://ibb.co/9WYwyV8

And here is the search result for "live" which is the very first item. This does not show the header.

https://ibb.co/QkrBPYj

But here is the fourth item which shows the header perfectly fine

https://ibb.co/4ttYZvk

And lastly when I search "james" it messes everything. No header on the first search result and the second one has the header but it combines the rest of the stuff with the second header.

https://ibb.co/sW801FM

@PICKAB00 - Ok I see the issue, we can't hide the header without checking to see if any other siblings are apart of the search results, here's what I have that's working locally:

    jQuery(document).ready(function ($) {
        $('.live-search .col-md-6').each(function () {
            $(this).attr('data-search-term', $(this).text().toLowerCase());
        });

        $('.live-search-box').on('keyup', function () {
            // reset everything
            $('.live-search .col-md-6').show();
            $('.menu-item-category').show();

            var searchTerm = $(this).val().toLowerCase();

            if (searchTerm.length < 1) return;

            $('.live-search .col-md-6').each(function () {
                if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length == 0) {
                    $(this).hide();

                    if ($(this).parents(".menu-item-wrapper").find('.live-search .col-md-6:visible').length == 0) {
                        $(this).parents(".menu-item-wrapper").find('.menu-item-category').hide();
                    }
                }
            });
        });
    });

and a working fiddle:

https://jsfiddle.net/qau5d289/2/

@REALRANDYALLEN - This works flawlessly. Thanks a million times!

@PICKAB00 - You're welcome!