如何淡出父元素？

我正在尝试创建一个实时过滤器功能。但是我无法使它正常工作。我希望班级的家长淡出。但是到目前为止，只有它自己消失的那类。我不知道我在做什么错。我已经尝试使用.parent和.closest（'div'）。

我将寻求任何帮助来解决此问题的方法。

jsfiddle：http : //jsfiddle.net/xcbx3at0/

HTML：

<form id="live-filter" action=""  method="post">
            <fieldset>
                <input type="text" class="text-input" id="city-filter" value="" />
            </fieldset>
        </form>
        <div class="post">
            <div class="header">
                <h2>Stockholm</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>London</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>New York</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>
        <div class="post">
            <div class="header">
                <h2>New york</h2>
            </div>
            <table>
                <tr>
                    <td>living</td>
                    <td>123</td>
                </tr>
                <tr>
                    <td>bad</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>sov</td>
                    <td>1</td>
                </tr>
            </table>
        </div>

CSS：

 .post {
                border: 1px solid;
                width: 200px;
                height: 200px;
                margin-top: 20px;
                margin: 0 auto;
                padding: 20px;
                margin-bottom: 20px;
            }

            .post table {
                margin: 0 auto;
            }

            .header h2 {
                text-align: center;
            }

jQuery的：

$(document).ready(function(){
            $("#city-filter").keyup(function(){

                // Retrieve the input field text and reset the count to zero
                var filter = $(this).val(), count = 0;

                // Loop through the comment list
                $(".header").each(function(){

                    // If the list item does not contain the text phrase fade it out
                    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                        $(this).closest('div').fadeOut();

                    // Show the list item if the phrase matches and increase the count by 1
                    } else {
                        $(this).show();
                        count++;
                    }
                });

                // Update the count
                var numberItems = count;
                $("#filter-count").text("Number of posts = "+count);
            });
        });