Javascript 当所有元素都具有相同的父类时，如何隐藏单击的元素

如何隐藏用户单击的特定幻灯片的标题。在这里，所有幻灯片都有相同的类名是一个大问题。如何克服这一点

<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>

一,

二,

三,

四,

五,

使用

此

或

$（此）

。JS代码在哪里？无论如何，请使用

$（this）.closest（'.slide'）.hide（）ID必须是唯一的。每张幻灯片上都有
id='mask'
。但它也会隐藏其他幻灯片的所有.caption。我只想隐藏单击的幻灯片标题，以隐藏剩余的应按常规显示的位置$（此）。查找（“.caption”）将只选择单击的幻灯片的子项“.caption”。所以它不会隐藏所有其他标题。
$(".slide").click(function(){
    $(this).find(".caption").hide();
})