Using $(this) with css class selectors in Jquery

Question

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .

   <form action="index.php" method="post">
    <div id="53">
        Track Name :- <b>Get Low</b>
        <br />By :- <a href="../members/profile.php?id=16">DJ perera</a>
        <br />
        <button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
        <audio src="../members/memberfiles/16/Get Low.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
        <button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
        <br />
        <input type="hidden" value="Get Low.mp3" name="file_name">
        <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
    </div>
</form>
<br>

<form action="index.php" method="post">
    <div id="52">
        Track Name :- <b>Eclips - Hardwell</b>
        <br />By :- <a href="../members/profile.php?id=16">DJ perera</a>
        <br />
        <button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
        <audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
        <button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
        <br />
        <input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
        <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
    </div>
</form>
<br>

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $('.weezy').slideUp();
        });
    });
</script>

i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .

i have already tried doing this . but it won't work

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $(this).$('.weezy').slideUp();
        });
    });
</script>

and

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $(this).find('.weezy').slideUp();
        });
    });
</script>

and this

<script type="text/javascript">
    $(document).ready(function(){
        $('.sharer').click(function(){
            $('.weezy',this).slideUp();
        });
    });
</script>

Kindly point out what went wrong since im new to javascript . Thanks

Answer 1

Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.

Example Here

$('.sharer').on('click', function () {
    $(this).closest('form').find('.weezy').slideUp();
});