当所有具有相同父类时，如何隐藏被点击的元素

Question

如何隐藏用户点击的特定幻灯片的标题。所有幻灯片都有相同的类名，这是一个很大的问题。怎么过来这个。

<div id="accordion-wrapper">
                <div class="slide">
                    <div id="mask"></div> <img src="snd/images/slider1.jpg" />
                    <div class="caption">
                        <p> 1</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="mask"></div> <img src="snd/images/slider2.jpg" />
                    <div class="caption">
                        <p> 2</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="mask"></div> <img src="snd/images/slider3.jpg" />
                    <div class="caption">
                        <p> 3</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="mask"></div> <img src="snd/images/slider4.jpg" />
                    <div class="caption">
                        <p> 4</p>
                    </div>
                </div>
                <div class="slide">
                    <div id="mask"></div> <img src="snd/images/slider5.jpg" />
                    <div class="caption">
                        <p> 5</p>
                    </div>
                </div>
            </div>

Answer 1

$(".slide").click(function(){
    $(this).find(".caption").hide();
})