Question

I am trying to remove a div when on AJAX success but am having trouble doing so. On success, I see the words “Added” appear twice because I’m not able to select the 2 div’s that contain it properly. Any advice on how to select it properly?
javascript:

 success: function(message){                         
        alert("Deleting!");
        $this.closest('.image').find('.already_fav_content p').removeClass(); #doesn't work

        $this.closest('.image').find('.fav_content p').hide(); #doesn't work

        $this.closest('.image').find('.removebutton').hide(); #works

        $this.closest('.image').find('.already_favorited').removeClass(); #works

        $this.closest('.image').find('.fav').removeClass(); #works


div.fav{
    display: none;
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left: 0px;
    /* styling bellow */
    background-color:#E99C07;
    font-family:  "Arial Black", Gadget, sans-serif;
    font-size:18px;
    font-weight:900;
    color:white;
    opacity:0.75; /* transparency */
    filter:alpha(opacity=70); /* IE transparency */
}
p.fav_content{
    padding:10px;
    margin:0px;
}

div.already_favorited{
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left: 0px;
    /* styling bellow */
    background-color:#E99C07;
    font-family:  "Arial Black", Gadget, sans-serif;
    font-size:18px;
    font-weight:900;
    color:white;
    opacity:0.75; /* transparency */
    filter:alpha(opacity=70); /* IE transparency */
}
p.already_fav_content{
    padding:10px;
    margin:0px;
}                    

html:

<div class="wrapper">

                <!-- image -->
                <div class="image" style="position: relative; left: 0; top: 0;">

                    <a href="/partners/Business/forbes">
                        <img src="http://videomuncher.com/static3/forbes.png" style="position: relative; width: 150px; top: 0; left: 0;">
                    </a>


                    <!-- already fav div -->
                        <div class="already_favorited">
                            <!-- fav content -->
                            <p class="already_fav_content">Added</p>    <!-- end fav content -->
                        </div>
                    <!-- end already fav div -->

                    <!--  munchbutton div --> 
                    <div class="munchbutton" style="display: none;">
                        <form method="post" action="/munch_video/   " class="removebutton"><div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="dKrS8NzqPWFLM6u8wJrAeid4nGw1avGK"></div>
                            <input type="hidden" value="Channel" class="playlist">
                            <input type="hidden" value="forbes" class="video_id">
                            <input type="hidden" value="forbes" class="video_title">
                            <input type="hidden" value="remove_video" class="remove">

                            <input type="submit" class="btn btn-danger" value="Remove">
                        </form>
                    </div>
                    <!-- end munchbutton div -->

                    <!-- fav div -->
                    <div class="fav">
                        <!-- fav content -->
                        <p class="fav_content">Added</p>    <!-- end fav content -->
                    </div>
                    <!-- end fav div -->

                </div>
                <!-- end image div -->

                </div>

Answer 1

It didn’t wroked because selectors was wrong

    $this.closest('.image').find('.already_fav_content p').removeClass(); #doesn't work

    $this.closest('.image').find('.fav_content p').hide(); #doesn't work

Change it to,

    $this.closest('.image').find('p.already_fav_content').removeClass();

    $this.closest('.image').find('p.fav_content').hide();